reactjs - React - onClick 事件无法正常工作

Question

我正在尝试将 onClick 函数作为道具传递给 React 中的子组件。但是，单击按钮时没有任何内容记录到控制台。现在我只是试图控制日志以确保事件实际上正在触发。

有任何想法吗？

class App extends React.Component {

togglePallets = (pallet) => {
    console.log('test');
  }

render() {
return (
        <div className="mainWrapper">
          <div className="mainContainer">
            <div>
              <img src="images/picture-of-me.jpg" alt="Me"></img>
            </div>
          </div>
          <SideBar toggle={this.togglePallets} showPallets={[this.state.showAboutPallet, this.state.showLanguagesPallet, 
          this.state.showProjectsPallet, this.state.showContactPallet]}/>
          {this.state.showAboutPallet && <AboutPallet />}
          {this.state.showAboutPallet && <LanguagesPallet />}
          {this.state.showAboutPallet && <ProjectsPallet />}
          {this.state.showAboutPallet && <ContactPallet />}
        </div>
      );
}
}

function SideBar(props) {
  return (
    <div className="sideBarContainer">
        <Button icon={faUser} showAboutPallet={props.showPallets[0]} onClick={props.toggle}/>
    </div>
    );
}

Answer 1

你写的是正确的。但是我们可以使用箭头函数以另一种方式尝试。

onClick={(e) => props.toggle(e,data)}

并且，在切换功能中进行相关更改，使其可以支持多个参数。

Answer 2

将您的 togglePallets 更改为以下任何一种

togglePallets() {
    console.log("test");
  };

如果你想访问事件然后

togglePallets(event) {
    console.log("test");
  };

或者

togglePallets=event =>{
    console.log("teeventst");
  };