反应，不能选择第一个选项<select>

Question

我渲染一个<select>框从数组反应。我的阵列看起来像这样：

options: [ 
    {"id":1,"name":"Option1"}, 
    {"id":2,"name":"Option2"}, 
    {"id":3,"name":"Option3"} 
    ]; 

我map阵列并找到所有的选项，然后我渲染map内的选项。不过，我可以从选择中选择任何选项，但第一个选项除外。

这是我的选择：

<select 
    className="form-control" 
    name={this.props.name} 
    onChange={this.handleChange.bind(this)}> 
    {(Array.isArray(this.props.options) && this.props.options.length > 0) ? this.props.options.map(option => { 
     return (
      <option key={option.id} value={option.id}>{option.name}</option> 
     ) 
    }) : (<option>No Options Found</option>)} 
</select> 

我怎么做，才能够选择第一个选项呢？我究竟做错了什么？

Answer 1

默认情况下选择您的第一个选项。如果你想 - 你可以创建一个空的选项，之后你可以选择第一个选项。

render() { 
    const options = this.props.options.map(option => 
     <option key={option.id} value={option.id}>{option.name}</option> 
    ) 

    return (
     <select 
     className="form-control" 
     name={this.props.name} 
     onChange={this.handleChange.bind(this)} 
     > 
     <option value="">Select option</option> 
     {options} 
     </select> 
    ) 
    }