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

Question

作为标题，React中的<select>元素有一个onChange事件，但当我更改下拉列表中的选项时，它不会触发
我设置了初始状态，用this.setState()更新状态，并用2个onChange事件测试它，1个用于文本输入，另一个用于<select>。

仅更新文本输入的状态。这意味着只有被称为onChange事件的文本输入。

有人能帮我弄清楚为什么会发生这种事吗？

ServicesPage = React.createClass({
mixins: [ReactMeteorData],
getMeteorData() {
    var accountId = Meteor.userId();
    return {
        services: Services.find({ accountId: accountId }).fetch(),
        sites: Sites.find({ accountId: accountId }).fetch()
    }
},
getInitialState() {
    return {
        selected: "0",
        test: 'Hello'
    }
},
handleChangeLocation(e) {
    this.setState({ selected: e.target.value });
},
handleChange(event) {
    this.setState({ test: event.target.value});
    console.log(this.state.test);
},
componentDidMount() {
    $('select').material_select();
    console.log(this.state.selected);
},
render() {
    var sitesList = [];
    for (var i = 0; i < this.data.sites.length; i++) {
        sitesList.push(<option key={i} value={this.data.sites[i]._id}>{this.data.sites[i].name}</option>);
    }
    return (
        <div>
            <input type="text" value={this.state.test} onChange={this.handleChange} />
            <h4>Services Page</h4>
            <div className="row">
                <div className="col s12 m6 l6">
                    <select value={this.state.selected} onChange={this.handleChangeLocation}>
                        <option value="0">Choose location</option>
                        {sitesList}
                    </select>
                </div>
            </div>
        </div>
        )
    }
})

Answer 1

material_select插入自己的DOM元素并隐藏现有的<select>层次结构。React元素对此一无所知，因为它们只在虚拟DOM级别工作。因此material_select破坏了React虚拟DOM和真实DOM之间的连接。

几乎所有JQuery插件都是这样，所以它们大多与React不兼容。您可能希望使用材料ui React组件。