事件未跨反应组件传播

Question

我有以下反应组件：

class Button extends React.Component {
  constructor(props){
    super(props);
    this.state = { disabled: false };
  }
  render() {
    return <button disabled={this.state.disabled} onClick={this.clicked.bind(this)}>Save</button>;
  }
  clicked(event) {
    this.setState({disabled: true});
  }
}
class Form extends React.Component {
  contructor(props) {
    super(props);
    this.state = { foo: "bar" };
  }
  render() {
    return (
      <form onSubmit={this.submit.bind(this)}>
        <input valueDefault={this.state.foo} />
        <Button />
      </form>
    );
  }
  submit(event) {
    event.preventDefault();
    // do some stuff
  }
}

但是，单击

按钮时，将触发单击的方法，但不会触发提交方法。 有什么方法可以使事件传播吗？ 事件不像普通的 html 表单事件那样传播有什么原因吗？

Answer 1

由于 setState 将重新渲染整个组件，因此事件将停止到此，并且不能持续到祖先形式。相反，您可以在表单的onSubmit中处理按钮禁用。像这样的东西

 class Button extends React.Component {
    constructor(props){
      super(props);
      this.state = { disabled: false };
    }
    render() {
      return <button disabled={this.state.disabled}>Save</button>;
    }
    clicked(event) {
      this.setState({disabled: true});
    }
  }
  class Form extends React.Component {
    constructor(props) {
      super(props);
      this.state = { foo: "bar" };
    }
    render() {
      return (
        <form onSubmit={this.submit.bind(this)}>
          <input valueDefault={this.state.foo} />
          <Button ref="button" onSubmit={this.submit.bind(this)}/> <----- Added reference here
        </form>
      );
    }
    submit(event) {
      event.preventDefault();
      var button = this.refs.button; // <---- Added ref to button
      button.setState({disabled:  true}); <---- set disabled state to button
    }
  }

这是一个演示 http://jsbin.com/ginune/edit?html,output