如何使用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>
     )
}

...，这很好。没问题。当我想将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();
} 

注意：不要忘记在Child组件内绑定handleClassSwitch方法，无论是在构造函数内绑定还是使用箭头功能。

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

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

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

Answer 2

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

如果您也将其绑定在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，该标记返回对toggleClassName的引用而不是调用它。尝试编写以下代码：

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

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