Как получить ключ выбранного значения из раскрывающегося списка в реакциях?

Question

Как связать данные json, у которых есть пара ключ-значение, чтобы выбрать html в responsejs, чтобы он отображал значение в раскрывающемся списке, и если я выберу значение, я должен предоставить соответствующий ключ?

Например:

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

в раскрывающемся списке, он должен показать «Лев», «Жираф», «Зебра», ... если я выбираю, Зебра, я должен получить выбрать (Zebra), а также ключ (103, в приведенном выше примере)

Answer 1

Вы можете просто удалить данные из объекта после получения значения выбранного параметра. Я не использовал управляемый ввод в моем примере, если вы используете это, это будет еще лучше.

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

Использование react-select. Он умеет обрабатывать id и value элегантно. Составьте карту id, чтобы ответить-выберите value и ваш value, чтобы отреагировать-выберите label.

Вы можете настроить обратный вызов, который вернет выбранное значение/с. Вы даже можете включить поиск.