在反应js中获取下拉列表的键值答案

【问题标题】：Geting key value of the dropdown list in reactjs在反应js中获取下拉列表的键值
【发布时间】：2019-04-18 20:24:22
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

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

示例

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>

【讨论】：