你如何在 React 中获得 select-option 的值？答案

【问题标题】：How do you get the value for select-option in React?你如何在 React 中获得 select-option 的值？
【发布时间】：2017-12-09 23:48:51
【问题描述】：

我尝试使用 onChange、onClick 和 ref，但这些都不能为我提供我选择的选项的价值

<select ref={input => { this.handleInput(input.value) } }>
    <option value="1">Blah</option>
    <option value="2">Blah2</option>
    <option value="3">Blah3</option>
</select>

如您所见， input.value 显示未定义。但是我不知道如何获取选项值，即使将 ref 更改为 onChange 和 onClick 也不起作用

【问题讨论】：

为什么不使用onChange并使用第一个参数e，然后访问e.target.value？
@Li357 成功了，谢谢！我不知道你能做到这一点

标签： reactjs jsx

【解决方案1】：

像这样尝试onChange：

class App extends React.Component {

  constructor(props){
    super(props)
    this.state = {
      result: ''
    };
  }
  
  handleSelectChange = (event) => {
    this.setState({
      result: event.target.value
    })
  }

  render() {
    return (
      <div>
      <select onClick={this.handleSelectChange}>
          <option value="1">Blah</option>
          <option value="2">Blah2</option>
          <option value="3">Blah3</option>
      </select>
      {this.state.result}
      </div>
    );
  }
}

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

<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="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

【讨论】：

我将 onClick 更改为 onChange。但是第一次选择我什么都没有？第二个等等就可以了
@SulungNugroho 我认为您必须将 [name] attr 添加到您的选择标签中才能定义它们