如何从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中的下拉菜单中获取所选值的关键字？

回答

相关问题