javascript - 在reactjs中获取下拉列表的键值

Question

我正在尝试获取动态下拉列表的“关键”值，如下所示:

searchSubmit(e){    
  const s = e.target.value;
  alert(s);
}

我的下拉列表如下:

<select
  className="textboxstyle"
  onChange={this.searchSubmit}
>
  <option key='-1'>Select Brand</option>
  <option key='0'>ALL</option>
  {optionItems}
</select>

我的动态下拉列表填充如下，

let brands = this.state.brands;
let optionItems = brands.map((brand) =>
  <option key={brand.id}>{brand.name}</option>
);

但是当我选择选项时，警告显示所选值的名称，而不是键。如何获得“关键”值？谢谢

Answer 1

React 使用 key 属性来区分数组中的所有元素。如果您希望 value 成为 brand 的 id，您可以将其用作 value 以及 键。

示例

class App extends React.Component {
  state = {
    brands: [{ id: 1, name: "Foo" }, { id: 2, name: "Bar" }]
  };

  searchSubmit = e => {
    const { value } = e.target;
    alert(value);
  };

  render() {
    const { brands } = this.state;

    return (
      <select onChange={this.searchSubmit}>
        <option value="-1">Select Brand</option>
        <option value="0">ALL</option>
        {brands.map(brand => (
          <option value={brand.id} key={brand.id}>
            {brand.name}
          </option>
        ))}
      </select>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>