事件不会在React组件之间传播

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
  }
}

但是，当单击按钮时，将触发clicked方法，但不会触发Submit方法。 有什么办法可以使事件传播？ 是否有某些原因导致事件不像正常的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，输出