可以從reactjs中的事件處理函數中訪問選項標記元素的鍵嗎？

我有一個非常具體和奇怪的情況。可以從reactjs中的事件處理函數中訪問選項標記元素的鍵嗎？

我有對象的足夠大的陣列，其存儲需要從一個選擇框中選擇所有對象。

Sortav這樣的：

var optionsArray = [ 
    { 
     name: option1, 
     code: f2X 
    }, 

    { 
     name: option2, 
     code: x21 
    }, 
    ... 
    { 
     name: option100, 
     code: Rga 
    }, 

]

的一點是，代碼屬性是沒有絲毫關係的選項的名稱。

我現在把這個選擇框，並在該選項的選擇，我需要返回該選項的代碼。以下是該選擇框，甚至處理器目前的樣子：

class SelectForm extends Component{ 
    onChange(e){ 
     console.log ("option selected", e.target.name); 
     //I can access the name, but what I want to access is the the code 
    } 

    render(){ 
     var _this = this; 

     return (
      <FormGroup controlId="myId"> 
       <FormControl componentClass="select" onChange={this.onChange}> 
        { 
         optionsArray.map(function(value, key) { 
         return <option key={key}>{value.name}</option> 
         }) 
        } 
       </FormControl> 
       </FormGroup> 
     ); 
    }

所以基本上在事件處理我要訪問的代碼，而不是我選擇的選項的名稱。

我想也許我可以訪問我從鍵選定的數組的索引，而做這樣的事情：

onChange(e){ 
    console.log ("selected option code", optionsArray[e.target.key].code); 
}

但關鍵是不確定的。有什麼方法可以從事件中訪問所選選項的鍵？或者甚至更好，有沒有一種方法可以將代碼包含在選項標籤中，以便稍後可以在事件處理程序中輕鬆訪問它？

來源

2017-02-11 theJuls

傳遞值作爲'

如何？作爲道具或許？因爲如果是這樣的話，我已經嘗試過使用key和value來做到這一點，而當我嘗試訪問它時（例如e.target.key），它就是未定義的。 – theJuls

忽略我以前的評論，我沒有意識到如果我通過'價值'作爲道具它會工作。感謝（如果你想發佈，作爲一個答案，我將其標記爲回答我的問題） – theJuls

你需要傳遞value在option屬性將包含的代碼值。因此，它會像

<FormControl componentClass="select" onChange={this.onChange}> 
    { 
    optionsArray.map(function(value, key) { 
     return <option key={key} value={value.code}>{value.name}</option> 
    }) 
    } 
</FormControl>

和訪問它像e.target.value在onChange功能。

onChange(e){ 
    console.log ("option selected", e.target.value); 
}

來源

2017-02-11 19:31:05

可以從reactjs中的事件處理函數中訪問選項標記元素的鍵嗎？

回答

相關問題