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'}
];
、それは「ライオン」を示す必要があり、「キリン」、「ゼブラ」、... 私は、ゼブラを選択した場合、私は選択を取得する必要がありますが値（ゼブラ）とキー（上記の例では103）
選択したオプションの値を取得すると、オブジェクトからデータを簡単に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>この場合、重複したエントリはどのように処理されますか？たとえば、学生名と学生ID（キー）を持っている場合、2人の学生が同じ名前を持つことができます – MemoryLeak
そうです、値属性をキーに含めてコードを変更して、これが一意になるようにします。このキー属性から対応する値を見つけることができます –
、それは働いて、ありがとう – MemoryLeak
react-selectを使用してください。 idとvalueを優雅に扱うことができます。 idと反応してvalueを選択し、valueを選択してlabelを選択してください。
選択した値を返すコールバックを設定できます。検索をオンにすることもできます。
あなたの提案に感謝しますが、自分のコンポーネントを構築しています。 – MemoryLeak
ホイールを再開発しても構わない; – luboskrnac
あなたは 'optionsData'を持っているので、なぜあなたは、キーを取得するために選択した値と一致しませんか？ – Khang
@ Khang、それはうまくいくでしょうが、この場合重複したエントリーはどのように扱いますか？たとえば、学生名と学生ID（キー）がある場合、2人の学生が同じ名前を持つことができます – MemoryLeak
「キー」は固有の権利ですか？ 'option value = {prop.key}> {prop.value}' – Khang