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

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 不兼容。您可能想改用 material-ui React 组件。

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

onChange event doesn't change state in <select> React

select

onchange

meteor

react-jsx