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

【问题标题】：onChange event doesn't change state in <select> ReactonChange 事件不会改变 <select> React 中的状态
【发布时间】：2016-01-14 07:56:10
【问题描述】：

作为标题，我在 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>
        )
    }
})

【问题讨论】：

$('select').material_select(); 你还在用什么插件？如果您使用的是 jquery 插件，则不会在 React onChange 事件上触发 onChange 事件。您有两个选择，第一个：$('select').change(function(e) { self.setState({value: e. value}); 第二个：使用 React Dropdown 组件，因此 onChange 事件将按您的预期触发。在这里react.parts/web 你可以找到 react dropdown 。混合 jquery 和 React 是有用的，但不被认为是最佳实践。

标签： select meteor onchange react-jsx

【解决方案1】：

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

几乎所有的 JQuery 插件都是这种情况，因此它们大多与 React 不兼容。你可能想改用material-ui React 组件。

【讨论】：