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

Reactjs 值更改时不会触发HTML select onChange,reactjs,Reactjs,当this.state.selected更改时,选择框会正确更改其值,但不会调用其onChange方法。这可能是因为我需要双向绑定,所以我尝试了来自的valueLink模式,但仍然没有触发: render: function() { return ( React.createElement("select", { valueLink: { value: this.state.selected, requestChange: this.changeHandler } },

当this.state.selected更改时,选择框会正确更改其值,但不会调用其onChange方法。这可能是因为我需要双向绑定,所以我尝试了来自的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")
    )
  )
}
看看整把小提琴:

我如何在不手动触发事件的情况下执行requestChange?在我看来,双向绑定应该为我做什么


我误解了什么吗?

您的代码与React的LinkedStateMixin有点混淆。如果要启动自己的事件处理程序,可以使用以下方法:

请注意,当您使用setState更改值时,不会激发处理程序,而是在通过用户交互更改值时激发处理程序

更新

然后,您可以观察使用生命周期方法之一(如componentWillUpdate或componentDidUpdate)对this.state或this.state.selected所做的更改:

jsbin:


谢谢你的快速回复。你的最后一句话正是重点。处理程序不仅应该在用户做某事时启动,而且应该在应用程序做某事时启动,例如上面的ajax示例。我的应用程序不应该在意更改是否来自用户。想象一个观察者。
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"));
componentDidUpdate: function(prevProps, prevState){  
    if(this.state.selected != prevState.selected)
        alert("selected changed!");
},