如何从状态数组创建下拉列表？

Question

我目前正在尝试在 react 中呈现一个下拉列表，该列表将显示时间列表。用户应该能够选择一个特定的值，并且该值将通过 onChange() 在状态内更新。我的问题是我正在尝试使用选择，但是当我单击它时，我的下拉列表没有显示任何内容。任何帮助将不胜感激，谢谢。

这是我目前拥有的

我的文件.js

export default class MyClass extends Component {
    constructor(props){
    super(props);

    this.state = {

    times: ["1:00", "2:00", "3:00"]

    }
}

RenderList(){
 let tempArray = [];
   let times = this.state.times;

        for(var i = 0; i < times.length; i++){
           tempArray.push(<option>{times[i]}</option>)
        }

        return tempArray
}

return (
<div
  <select>{this.RenderList()}</select>
</div>
);

}

我有点希望在下拉列表中看到一个时间列表，但该列表为空。

Answer 1

这就是你要找的吗？您需要地图来呈现选项，我希望这会有所帮助！

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      times: ["1:00", "2:00", "3:00"]
    }
    this.handleChange = this.handleChange.bind(this)
  }

  handleChange(e) {
    console.log(e.target.value)
  }

  render() {
    const {times} = this.state;
    return (
      <select onChange={this.handleChange}>
         {times.map(time => {
           return (
             <option value={time}> {time} </option>
           )
         })}
    </select>
    )
  }
}
render(<App />, document.getElementById('root'));

Answer 2

我想我会这样做。

import React, {Component} from 'react'

class ComponentName extends Component{
    state = {
        myArray: ["1:00", "2:00", "3:00"]}
    }


     render() {
         return (
             <select>
                 {this.state.myArray.map(optn => (
                     <option>{optn}</option>
                 ))}
             </select>
         )
     }

     export default ComponentName

希望对你有帮助