Reacts select onChange获取密钥

-1

是否有人知道如何在触发函数onChange时从select中检索“key”值？Reacts select onChange获取密钥

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的值，但是我找不到如何检索密钥。

来源

2016-07-28 G. M.

你为什么想要钥匙？对于React来跟踪订单，如果你需要obj.id，只需传入id = {obj.id}并以这种方式访问它 – JordanHendrix

我想过传递id。我会做一些像callback.bind（this，obj.id）。问题是我生成一个array.map的选项标签，我无法直接访问obj.id –

另外我想知道为什么人们低调这个问题，因为迄今为止没有丹尼设法找到答案，甚至那一个不是那么简单...... –

您可以将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实际上指的是选择元素，而不是选择元素。您需要找到选定的选项，然后获取其data-id属性。工作示例：

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

来源

2016-07-28 02:18:33 Danny

看起来很接近，非常接近我在找的东西。我测试了它，但它在输出上给我“空”。我看到了一些近似的东西，比如：button onClick（）。也许这里的问题是我们在选择。 –

啊。这是因为e.target引用select元素而不是选项元素。需要搜索选定的选项。 – Danny

它有效...有点儿！使用以下命令修复控制台日志：console.log（node.getAttribute（'data-id'））;我接受答案:) –

我不知道reactjs，但在JavaScript检索所选值是：

element.options[element.selectedIndex].value

所以也许尝试：

element.options[element.selectedIndex].key

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

来源

2016-07-28 02:16:21 KaveElite

谢谢你，可悲的是target.key的解决方案不起作用。 Reactjs使用虚拟DOM，并有自己的方式来做东西。 –

Reacts select onChange获取密钥

回答

相关问题