反應，不能選擇第一個選項<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> 
    ) 
    }