Question

是否有人知道如何检索＆＃34;键＆＃34;触发函数onChange时select的值是什么？

callback(e) {
  e.target.value;
}
...
<select onChange={this.callback.bind(this)}>
    <option key={obj.id}>{obj.name}</option>
    <option key={obj.id}>{obj.name}</option>
</select>

我知道我可以使用target.value获取obj.name的值，但我无法找到如何检索密钥。

Answer 1

您可以将id设置为数据属性，然后从e.target访问它。您示例的修改版本：

callback(e) {
  for (let node of e.target.children) {
    if (node.value === e.target.value) {
      console.log(node.getAttribute('data-id');
      return;
    }
  }
}
...
<select onChange={this.callback.bind(this)}>
    <option key={obj1.id} data-id={obj1.id} value={obj1.value}>{obj1.name}</option>
    <option key={obj2.id} data-id={obj2.id} value={obj2.value}>{obj2.name}</option>
</select>

编辑：

修改上面的例子以解决问题，因为e.target实际上是指select元素，而不是option元素。您需要找到所选的选项，然后获取其data-id属性。工作示例：

https://jsfiddle.net/69z2wepo/50706/

Answer 2

我不知道reactjs，但是在javascript中检索选定的值是：

element.options[element.selectedIndex].value

所以也许试试：

element.options[element.selectedIndex].key

其中元素是您的实际选择。

Answer 3

我知道这个问题比我的孩子还大，但是上面两个答案的混合：由于您可能通过 props 生成 <option> 元素，因此您可以使用 select 元素的 {{ 1}} 值，然后索引到您的道具中以获取用于首先生成 selectedIndex 的对象。

option

Reacts select onChange get key

3 个答案: