当值是一个对象时，反应从选择的对象数组中获取下拉列表答案

【问题标题】：React get dropdown from array of object selected when value is an object当值是一个对象时，反应从选择的对象数组中获取下拉列表
【发布时间】：2018-06-20 12:13:59
【问题描述】：

我现在有这样的下拉菜单。它的工作我得到了我需要的值，但是当值是一个对象时，如何在下拉列表中更改名称。请问有什么想法吗？

onDropdownSelected = (e) => {           
    if (e.target.value !== '') {
        const inst = JSON.parse(e.target.value)
        console.log('inst', inst)           
       }
    }


<select id="mySelect" onChange={this.onDropdownSelected}>
  {installations.map(installation => 
   <option key={installation._id} name={installation._id} value= 
   {JSON.stringify(installation)}>{installation.name}</option>)}
</select>

【问题讨论】：

标签： reactjs select dropdown

【解决方案1】：

要获取安装名称，只需使用inst.name。

我复制了你的例子。稍微玩一下，随时提出任何相关问题。

class App extends React.Component {
 onDropdownSelected = (e) => {           
  if (e.target.value !== '') {
      const inst = JSON.parse(e.target.value)
      console.log('Installation name:', inst.name);
     }
  }
  
  generateInstallations = () => [...Array(100)].map((val, i) => (
    { _id: `special-${i}`, name: `Installation #${i}` }
 ));
    
  render() {
    const installations = this.generateInstallations();
    return (
      <div>
        <h4>Select your installation:</h4>
        <select id="mySelect" onChange={this.onDropdownSelected}>
          {installations.map(installation => 
           <option
            key={installation._id}
            name={installation._id}
            value={JSON.stringify(installation)}>
            {installation.name}
           </option>
          )}
        </select>
      </div>
    );
  }
  
}

ReactDOM.render(<App />, document.getElementById('react'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="react"></div>

【讨论】：

谢谢。我正在做类似的事情： const instName = inst.name this.setState({ instName: instName}) 但是下拉列表中的值重复，现在不要正确使用这个 inst.name。
@Assai 我没听懂你的意思。你的意思是？请你澄清一下。问题解决了吗？
我不确定如何使用 inst.name。
嗨，我面临同样的问题，在某些方面我已经从你关于value={JSON.stringify(installation)} 的回答中解决了这个问题，因此我得到了一个完美的数组对象，该对象是从 select 中选择的标签。现在我无法在 API 中传递这些值。你能帮我解决我的详细问题吗？ stackoverflow.com/q/59138730/7995957

【解决方案2】：

我这样做了，将值作为下拉列表中的索引，然后将此索引分配给对象数组，并获取我需要的对象值：

onDropdownSelected =(e)=>{
if (e.target.value !== '') {    
  this.setState({
    inst: this.state.installations[e.target.value]
  })    


<select onChange={this.onDropdownSelected} disabled >
        {this.state.installations.map((option, index) =>
             <option key={index} value={index}>
                 {option.name}
             </option>)}
</select>

【讨论】：