Question

我有一个react组件类，它包含两个方法handleSubmit和handleReset。

class Filter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      // initial state
    };

    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleReset = this.handleReset.bind(this);
  }

  handleReset() {
    this.setState({
      // reset state to initial state
    });
  }

  handleSubmit(event) {
    // handle form submission and sending request to api endpoint
  }

  render() {    
    return (
      <form className="form-horizontal col-sm-12" onSubmit={this.handleSubmit}>
        <OtherFormElements />
        <button
          type="submit"
          className="btn btn-success"
          onClick={this.handleSubmit && this.handleReset}
        >Submit
        </button>
      </form>
    );
  }
}

单击提交按钮时，将调用这两个函数。虽然这是理想的结果，但根据我对逻辑AND运算符的理解，这不应该是这样。根据我的理解，＆amp;＆amp;如果评估为真，则b将导致b。我想知道的是为什么在这种情况下调用这两个函数？

Answer 1

这是因为表单onSubmit和按钮onClick都被调用了。

很容易推断出onSubmit的内容，它设置为this.handleSubmit。

按钮为this.handleSubmit && this.handleReset，JavaScript &&运算符返回第一个虚假操作数，如果所有这些都是真实的，则会返回最后一个操作数，即this.handleReset。

因此，在触发按钮的this.handleReset事件时调用click，在表单的this.handleSubmit事件后调用submit被解雇了。

Answer 2

我想知道的是为什么在这种情况下调用这两个函数？

由于onClick={this.handleSubmit && this.handleReset}评估为onClick={this.handleReset}，因此调用this.handleReset并且您在表单标记上有onSubmit={this.handleSubmit}处理程序。

因此，单击按钮会调用这两个函数（即一个因为单击处理程序而另一个因为表单提交事件）。

在这种情况下，为什么逻辑AND运算符会调用这两个函数

2 个答案: