reactjs - 如何从reactjs的下拉列表中获取选定值的键？

Question

如何绑定(bind)具有键值对的json数据以在reactjs中选择html，以便它应该在下拉列表中显示值，如果我选择一个值，我应该提供相关的键？

例如:

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

在下拉菜单中，它应该显示“狮子”、“长颈鹿”、“斑马”、...
如果我选择，斑马，我应该得到选择值(斑马)以及键(103，在上面的例子中)

Answer 1

您可以简单地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>