在有状态的React组件中更改<select>值的正确方法

Question

我正在渲染一个＆lt; select＆gt;在有状态的组件中： class StatefulContainer扩展了React.Component {     构造函数（道具）{         超级（道具）;         this.state = {mode：'all'};     }     render（）{         返回＆lt; div＆gt;             ＆LT;形式＆GT;                 ＆lt; select value = {this.state.mode} onChange = {this.handleModeSelection}＆gt;                     ＆lt; option value ='all'＆gt;全部显示＆lt; /选项＆gt;                     ＆lt; option value ='one'＆gt;只是第一个＆lt; / option＆gt;                 ＆LT; /选择＆GT;             ＆LT; /形式＆GT;         ＆LT; / DIV取代;     }     handleModeSelection（{target：{value}}）{         this.setState（{mode：value}）;     } } React.render（     ＆LT; StatefulContainer /＆gt;中     的document.getElementById（ '根'） ）; 并且无法弄清楚为什么浏览器用户无法将所选选项更改为一个。这是一个JS Bin。

Answer 1

由于Felix已经在评论中暗示，当您对React组件使用ES6类时，您不能依赖React在正确的上下文中调用回调（如handleModeSelection）（记录为here）。 / p>

有各种方法可以解决这个问题。常见的是绑定构造函数中的回调：

constructor(props) {
  super(props);
  this.state = {mode: 'all'};
  this.handleModeSelection = this.handleModeSelection.bind(this);
}