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獲取密鑰

回答

相關問題