如何從reactjs中的下拉菜單中獲取所選值的關鍵字？

如何綁定一個json數據，該數據具有鍵值對以在reactjs中選擇html，以便它應該在下拉列表中顯示值，如果我選擇一個值，我應該提供相關的鍵值？如何從reactjs中的下拉菜單中獲取所選值的關鍵字？

例如：

var optionsdata = [ 
    {key='101',value='Lion'}, 
    {key='102',value='Giraffe'}, 
    {key='103',value='Zebra'}, 
    {key='104',value='Hippo'}, 
    {key='105',value='Penguin'} 
    ];

在下拉

，它應該顯示「獅子」，「長頸鹿」，「斑馬」，... 如果讓我選擇，斑馬，我應該得到的選擇值（Zebra）以及密鑰（在上例中爲103）

來源

2016-11-24 MemoryLeak

因爲你有'optionsData'，你爲什麼不與選定值匹配它拿到鑰匙？ – Khang

@Khang，這將起作用，但在這種情況下我們將如何處理重複條目？例如，如果我們有學生姓名和學號（密鑰），兩個學生可以有相同的名字 – MemoryLeak

'key'是唯一的權利？那麼你可以將'key'設爲'value'選項，如下所示：'' – Khang

一旦獲得選定選項的值，您可以簡單地將filter中的數據從對象中取出。在我的例子中，我沒有使用受控輸入，如果使用它，它會更好。

class App extends React.Component { 
 
    constructor() { 
 
    super(); 
 
    this.state = { 
 
     optionsdata : [ 
 
     {key:'101',value:'Lion'}, 
 
     {key:'102',value:'Giraffe'}, 
 
     {key:'103',value:'Zebra'}, 
 
     {key:'104',value:'Hippo'}, 
 
     {key:'105',value:'Penguin'} 
 
     ] 
 
    } 
 
    } 
 
    handleChange = (e) => { 
 
    console.log(e.target.value); 
 
    var value = this.state.optionsdata.filter(function(item) { 
 
     return item.key == e.target.value 
 
    }) 
 
    console.log(value[0].value); 
 
    } 
 
    render() { 
 
    return (
 
     <select onChange={this.handleChange}> 
 
     {this.state.optionsdata.map(function(data, key){ return (
 
      <option key={key} value={data.key}>{data.value}</option>) 
 
     })} 
 
     </select> 
 
    ) 
 
    } 
 
} 
 

 
ReactDOM.render(<App/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.min.js"></script> 
 
<div id="app"></div>

來源

2016-11-24 03:39:42

在這種情況下，我們將如何處理重複條目？例如，如果我們有學生姓名和學號（密鑰），兩名學生可以具有相同的名稱 – MemoryLeak

是的，我改變了代碼以包含value屬性作爲關鍵字，因爲這是唯一的。我們可以從它的關鍵屬性 –

找到相應的值，謝謝 – MemoryLeak

使用react-select。它能夠優雅地處理id和value。映射您的id以作出反應 - 請選擇value和您的value以進行反應 - 請選擇label。

您可以配置將返回您選擇的值的回調。你甚至可以打開搜索。

來源

2016-11-24 03:36:45 luboskrnac

感謝您的建議，但我正在構建自己的組件。 – MemoryLeak

隨時重新發明車輪;） – luboskrnac

如何從reactjs中的下拉菜單中獲取所選值的關鍵字？

回答

相關問題