Question

如何绑定一个具有键值对的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'}
  ];

在下拉菜单中，它应该显示＆＃34; Lion＆＃34;，＆＃34; Giraffe＆＃34;，＆＃34; Zebra＆＃34;，... 如果我选择Zebra，我应该得到选择值（Zebra）以及密钥（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>

Answer 2

希望这个答案会有所帮助

1）首先找到选定的索引，称为索引

var selectedIndex = event.target.options.selectedIndex;

2）如果您具有自定义属性，并且想获取该属性的值，那么

var customAtrribute= event.target.options[selectedIndex].getAttribute('customAtrribute');

Answer 3

使用react-select。它能够优雅地处理id和value。将id映射到反应选择value和value以反应选择label。

您可以配置回调，它将返回您选择的值/ s。你甚至可以打开搜索。

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

3 个答案: