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

Question

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

这就是我目前拥有的

myfile.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

这是您要找的吗？您需要 map 来渲染选项，我希望这会有所帮助!

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'));