javascript - 事件不跨 react 组件传播

Question

我有以下 react 组件:

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,output