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)}>

谢谢菲利克斯·克林，但他的回答需要改变一下:

var MySelect = React.createClass({
 getInitialState: function() {
     return {
         value: 'select'
     }
 },
 change: function(event){
     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); 

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>

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>
  );
};

更改事件在<select>元素上触发，而不是<option>元素上触发。然而，这并不是唯一的问题。您定义change函数的方式不会导致组件的重新呈现。看起来你可能还没有完全掌握React的概念，所以“React中的思考”可能会有所帮助。

您必须将所选值存储为状态，并在值更改时更新状态。更新状态将触发组件的重新呈现。

var MySelect = React.createClass({
     getInitialState: function() {
         return {
             value: 'select'
         }
     },
     change: function(event){
         this.setState({value: event.target.value});
     },
     render: function(){
        return(
           <div>
               <select id="lang" onChange={this.change} 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);

还要注意，<p>元素没有value属性。React/JSX只是复制了众所周知的HTML语法，它没有引入自定义属性(除了key和ref)。如果您希望选择的值是<p>元素的内容，那么只需将其放入其中，就像处理任何静态内容一样。

了解有关事件处理、状态和表单控件的更多信息:

http://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html http://facebook.github.io/react/docs/forms.html