如何使用 onClick 触发两个函数 reactJs

Question

对 React Js 相当陌生，所以请耐心等待...

我在子组件中使用 onClick 来更改父组件的状态。父状态是一个布尔值，它反过来用于在与单击的元素不同的元素上打开和关闭一个类。像这样的：

在 Parent.js 中（仅相关代码）：

constructor(props) {
    super(props);

    this.state = {
        elementOpen: false;
    }

    this.handleClick = this.handleClick.bind(this);
}

handleClick() {
    this.setState({
        elementOpen: !this.state.bucketListOpen
    })
}

render() {
     return (
         <Child 
             className = {this.state.elementOpen ? "open" : "closed"}
             toggleClassName = {this.handleClick}
         />
     )
}

在 Child.js 中（仅相关代码）：

render() {
     return (
         <div>
             <div className={this.props.className}>Test</div>
             <a onClick={this.props.toggleClassName}>Click Me</a>
         </div>
     )
}

... 这很好用。没问题。当我想将子组件中的 {this.props.toggleClassName} 移动到处理函数中时，就会出现问题（原因是我可以在点击时触发多个事件）。简而言之，它停止工作。

我尝试在 Child 组件中创建一个方法并将 prop 放入方法中，如下所示：

handleClassSwitch() {
    return this.props.toggleClassName;
}  

render() {
    return (
         <div>
             <div className={this.props.className}>Test</div>
             <a onClick={this.handleClassSwitch}>Click Me</a>
         </div>
    )
}

...但遗憾的是它不起作用，我很难过。可能真的很明显，但我在这里挣扎。任何帮助表示赞赏。

Answer 1

handleClassSwitch 内部可以调用多个函数，但需要使用() 调用这些方法。

像这样：

handleClassSwitch() {
   this.props.toggleClassName();    // notice ()
   function2();
   function3();
} 

注意：不要忘记在子组件内部绑定handleClassSwitch方法，要么绑定在构造函数内部，要么使用箭头函数。

检查此 sn-p 以了解这两者之间的区别：

function abc() {
  console.log('calling abc');
  return 1;
}

console.log('without () => ', abc);
console.log('with () => ', abc());

Answer 2

看来您实际上不再调用toggleClassName。当您单击a 标记时，它调用handleClassSwitch，它返回对toggleClassName 的引用而不是调用它。试着写这个：

handleClassSwitch = () => {
   this.props.toggleClassName();
}  

请注意，我使用=> 语法绑定handleClassSwitch，因此它可以访问this

Answer 3

您目前没有像在Parent 组件中绑定handleClick 那样绑定handleClassSwitch 函数。

如果你也将它绑定到Child 组件中，它也会起作用。如果您愿意，也可以将handleClassSwitch 设为箭头函数。

class Child {
  handleClassSwitch = () => {
    this.props.toggleClassName();
  };

  render() {
    return (
      <div>
        <div className={this.props.className}>Test</div>
        <a onClick={this.handleClassSwitch}>Click Me</a>
      </div>
    );
  }
}