onChange事件不会改变<select> React中的状态

Question

作为标题，我有＆lt; select＆gt;的onChange事件。 React中的元素，但是当我更改下拉列表中的选项时它不会触发。 我设置初始状态，使用this.setState（）更新状态并使用2 onChange事件测试它，1用于文本输入，另一个用于＆lt; select＆gt;。 仅更新文本输入的状态。它仅表示名为onChange事件的文本输入。 任何人都可以帮我弄清楚为什么会这样吗？ ServicesPage = React.createClass（{ mixins：[ReactMeteorData]， getMeteorData（）{     var accountId = Meteor.userId（）;     返回{         services：Services.find（{accountId：accountId}）。fetch（），         sites：Sites.find（{accountId：accountId}）。fetch（）     } }， getInitialState（）{     返回{         选中：“0”，         测试：'你好'     } }， handleChangeLocation（e）{     this.setState（{selected：e.target.value}）; }， handleChange（event）{     this.setState（{test：event.target.value}）;     的console.log（this.state.test）; }， componentDidMount（）{     $（ '选择'）material_select（）。     的console.log（this.state.selected）; }， render（）{     var sitesList = [];     for（var i = 0; i＆lt; this.data.sites.length; i ++）{         sitesList.push（＆lt; option key = {i} value = {this.data.sites [i] ._ id}＆gt; {this.data.sites [i] .name}＆lt; / option＆gt;）;     }     回来（         ＆LT; DIV＆GT;             ＆lt; input type =“text”value = {this.state.test} onChange = {this.handleChange} /＆gt;             ＆lt; h4＆gt;服务页面＆lt; / h4＆gt;             ＆lt; div className =“row”＆gt;                 ＆lt; div className =“col s12 m6 l6”＆gt;                     ＆lt; select value = {this.state.selected} onChange = {this.handleChangeLocation}＆gt;                         ＆lt; option value =“0”＆gt;选择地点＆lt; / option＆gt;                         {} sitesList                     ＆LT; /选择＆GT;                 ＆LT; / DIV＆GT;             ＆LT; / DIV＆GT;         ＆LT; / DIV＆GT;         ）     } }）

Answer 1

material_select会插入自己的DOM元素并隐藏现有的<select>层次结构。 React元素对此没有任何了解，因为它们仅在虚拟DOM的级别上工作。因此material_select破坏了React虚拟DOM和真实DOM之间的连接。

几乎所有JQuery插件都会出现这种情况，因此它们与React大多不兼容。您可能希望改为使用material-ui React组件。