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

Question

对 React Js 还很陌生，所以请多多包涵...

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

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

... 这很好用。没问题。当我想将 Child 组件中的 {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方法，要么在构造函数中绑定，要么使用箭头函数。

检查此代码段以了解两者之间的区别：

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

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

Answer 2

您目前没有像绑定 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>
    );
  }
}

Answer 3

看来您实际上不再调用 toggleClassName 了。当您单击 a 标记时，它会调用 handleClassSwitch，其中 returns 是对 toggleClassName 的引用，而不是调用它。试试这样写：

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

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

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

How to use onClick to fire two functions reactJs

javascript

reactjs

state

eventhandler

react-props

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

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