javascript - react JS : Calling two functions in an onClick event does not run functions

Question

我正在使用 React 和 React Spring。 React spring 有一个切换功能，本质上是在单击时最大化窗口。它看起来像这样:

class Projects extends Component {

constructor() {
    super()
    this.state = {
      instructions: true,
      data: ''
    }
  }

  handleClick ()  {
    console.log('hello world');
    this.setState({
      instructions: false
    });
    console.log(this.state.instructions);
    return true;
  }

  render() {
    return (
       {this.state.instructions && (
          <div className="projects-instructions">
             Instructions here
          </div>
       )}
       <Grid
            className="projects"
            data={data}
            keys={d => d.name}
            heights={d => d.height}
            columns={2}>
            {(data, maximized, toggle) => (
                  <div onClick={()=>{
                         return data.clicks ? toggle() : false
                       }}>
                  </div>
            )}
       </Grid>
    );
  }
}
export default Projects;

我想要做的是隐藏点击说明。我可以通过在我的 onClick 标记中通过 this.handleClick.bind(this) 调用 handleClick 来实现这一点: onClick= {this.handleClick.bind(this)}。但这意味着我必须删除切换 onClick 功能。所以我发现我可以像这样调用两个函数:

onClick={()=>{
                  this.handleClick.bind(this);
                  return data.clicks ? toggle() : false;
                }}

问题是 this.handleClick.bind(this) 永远不会运行。 console.log 甚至不运行。

我应该怎么做？

Answer 1

将 this 绑定(bind)到函数不会调用该函数。它只是指定在该函数中使用时 this 所指的内容。在构造函数中绑定(bind)到 this，然后在 onClick 事件中，只需正常调用该函数(即 this.handleClick())。

class Projects extends Component {

  constructor() {
    super();
    this.state = {
      instructions: true,
      data: ''
    }

    //this is where you bind `this` to methods
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick ()  {
    console.log('hello world');
    this.setState({
      instructions: false
    });
    console.log(this.state.instructions);
    return true;
  }

  render() {
    return (
       {this.state.instructions && (
          <div className="projects-instructions">
             Instructions here
          </div>
       )}
       <Grid
            className="projects"
            data={data}
            keys={d => d.name}
            heights={d => d.height}
            columns={2}>
            {(data, maximized, toggle) => (
              <div onClick={()=>{
                this.handleClick();
                return data.clicks ? toggle() : false
              }}>
              </div>
            )}
       </Grid>
    );
  }
}
export default Projects;