var MySelect = React.createClass({
getInitialState: function() {
 

var MySelect = React.createClass({ getInitialState: function() { return { value: 'select' } }, change: function(event){ event.persist(); //THE MAIN LINE THAT WILL SET THE VALUE this.setState({value: event.target.value}); }, render: function(){ return( <div> <select id="lang" onChange={this.change.bind(this)} value={this.state.value}> <option value="select">Select</option> <option value="Java">Java</option> <option value="C++">C++</option> </select> <p></p> <p>{this.state.value}</p> </div> ); } }); React.render(<MySelect />, document.body); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

  handleChange(value, selectOptionSetter) => {
     selectOptionSetter(value)
     // handle other stuff like persisting to store etc
   }

  const Dropdown = (props) => {
  const { options } = props;
  const [selectedOption, setSelectedOption] = useState(options[0].value);
  return (
      <select
        value={selectedOption}
        onChange={e => handleChange(e.target.value, setSelectedOption)}>
        {options.map(o => (
          <option key={o.value} value={o.value}>{o.label}</option>
        ))}
      </select>
  );
};

var MySelect = React.createClass({
getInitialState: function() {
 

var MySelect = React.createClass({ getInitialState: function() { return { value: 'select' } }, change: function(event){ event.persist(); //THE MAIN LINE THAT WILL SET THE VALUE this.setState({value: event.target.value}); }, render: function(){ return( <div> <select id="lang" onChange={this.change.bind(this)} value={this.state.value}> <option value="select">Select</option> <option value="Java">Java</option> <option value="C++">C++</option> </select> <p></p> <p>{this.state.value}</p> </div> ); } }); React.render(<MySelect />, document.body); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

我把这个加在这里，也许能帮到别人因为这个方法帮过我。

这是为了获取SELECTED INDEX。不是为了价值。 (对我有用，因为我的选项列表是一串数字)

const [selectedOption, setSelectedOption] = useState(0)
<select onChange={event => setSelectedOption(event.target.options.selectedIndex)}>

如果你使用select作为内联到其他组件，那么你也可以使用下面给出的like。

<select onChange={(val) => this.handlePeriodChange(val.target.value)} className="btn btn-sm btn-outline-secondary dropdown-toggle">
    <option value="TODAY">Today</option>
    <option value="THIS_WEEK" >This Week</option>
    <option value="THIS_MONTH">This Month</option>
    <option value="THIS_YEAR">This Year</option>
    <option selected value="LAST_AVAILABLE_DAY">Last Availabe NAV Day</option>
</select>

在使用select的组件上，定义处理onChange的函数，如下所示:

handlePeriodChange(selVal) {
    this.props.handlePeriodChange(selVal);
}

React钩子(16.8+):

const Dropdown = ({
  options
}) => {
  const [selectedOption, setSelectedOption] = useState(options[0].value);
  return (
      <select
        value={selectedOption}
        onChange={e => setSelectedOption(e.target.value)}>
        {options.map(o => (
          <option key={o.value} value={o.value}>{o.label}</option>
        ))}
      </select>
  );
};