Question

我渲染一个＆lt; select＆gt;框中反应来自阵列。我的数组看起来像这样：选项：[ { “ID”：1， “名”： “选项1”}， { “ID”：2， “名”： “选项2”}， { “ID”：3， “名”： “2选项”} ]。我映射数组并找到所有选项，然后我在地图中渲染选项。但是我可以从select中选择任何选项，除了第一个。这是我的选择：＆LT;选择类名=“形式控制” 名称= {this.props.name} 的onChange = {this.handleChange.bind（本）}＆GT; {（Array.isArray（this.props.options）＆amp;＆amp; this.props.options.length＆gt; 0）？ this.props.options.map（option =＆gt; { 回来（＆lt; option key = {option.id} value = {option.id}＆gt; {option.name}＆lt; / option＆gt; ） }）:(＆lt; option＆gt;找不到选项＆lt; / option＆gt;）} ＆LT; /选择＆GT; 我该怎么做，能够选择第一个选项？我究竟做错了什么？

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>
    )
  }

Answer 2

在选项之前添加默认行

<option>select size</option>
quickview_product.map(itm => <option value={itm.label}>{itm.label}</option>)

React，无法选择<select>的第一个选项

2 个答案: