使用React JS进行下拉的OnChange事件

Question

var MySelect = React.createClass({

     change: function(){

         return document.querySelector('#lang').value;

     },

     render: function(){

        return(

           <div>

               <select id="lang">

                  <option value="select" onChange={this.change}>Select</option>

                  <option value="Java" onChange={this.change}>Java</option>

                  <option value="C++" onChange={this.change}>C++</option>

               </select>

               <p></p>

               <p value={this.change}></p>

           </div>

        );

     }

});

React.render(<MySelect />, document.body);

该onChange事件不起作用。

Answer 1

React Hooks（16.8+）：const Dropdown = ({&nbsp; options}) => {&nbsp; const [selectedOption, setSelectedOption] = useState(options[0].value);&nbsp; return (&nbsp; &nbsp; &nbsp; <select&nbsp; &nbsp; &nbsp; &nbsp; value={selectedOption}&nbsp; &nbsp; &nbsp; &nbsp; onChange={e => setSelectedOption(e.target.value)}>&nbsp; &nbsp; &nbsp; &nbsp; {options.map(o => (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value={o.value}>{o.label}</option>&nbsp; &nbsp; &nbsp; &nbsp; ))}&nbsp; &nbsp; &nbsp; </select>&nbsp; );};