HTML select onChange 不会在值更改时触发

Question

当this.state.selected改变时，select框正确地改变了它的值，但是它的onChange方法没有被调用。这可能是因为我需要双向绑定，所以我尝试了 the docs 中的 valueLink 模式，但它仍然没有被触发：

render: function() {
  return (
    React.createElement("select", { valueLink: { value: this.state.selected, requestChange: this.changeHandler } },
       React.createElement("option", { value: 1 }, "1"),
       React.createElement("option", { value: 2 }, "2")
    )
  )
}

查看全文fiddle：http://jsbin.com/tisahiliqi/1/edit?html,output

如何让 requestChange 执行 而无需 手动触发事件（在我看来，双向绑定应该为我做什么）？

我是不是误会了什么？

Answer 1

您的代码与 React 的 LinkedStateMixin 有点混淆。如果你想触发你自己的事件处理程序，你可以使用这个： http://jsbin.com/fuwowifoqe/1/

var MySelect = React.createClass({
  getInitialState: function() {
    return { selected: 1 }
  },

   componentDidMount: function() {
    // Imagine some AJAX that takes 1s
    window.setTimeout(function() {
      this.setState({ selected: 2 });
    }.bind(this), 1000);
  },

  changeHandler: function(e) {
    // ... Doesn't fire...
    alert("Something changed!");
    this.setState({selected : e.target.value })
  },

  render: function() {
    return (
      React.createElement("select", { value: this.state.selected, onChange: this.changeHandler },
         React.createElement("option", { value: 1 }, "1"),
         React.createElement("option", { value: 2 }, "2")
      )
    )
  }
});

React.render(React.createElement(MySelect, null, "Hi"), document.getElementById("app"));

请注意，当您使用 setState 更改值时不会触发处理程序，但当通过用户交互更改值时。

更新

然后您可以使用生命周期方法之一（例如 componentWillUpdate 或 componentDidUpdate:

观察对 this.state 或 this.state.selected 的更改

jsbin: http://jsbin.com/lipovucapi/1/

componentDidUpdate: function(prevProps, prevState){  
    if(this.state.selected != prevState.selected)
        alert("selected changed!");
},

HTML select onChange 不会在值更改时触发

HTML select onChange doesn't fire when value changes

reactjs