React JS：在 onClick 事件中调用两个函数不运行函数

Question

我正在使用 React 和 React Spring。 React spring 有一个切换功能，可以在点击时最大化 window。它看起来像这样：

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绑定到一个函数并不会调用该函数。它只是指定在该函数中使用时 this 指的是什么。在构造函数中绑定到 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;

React JS：在 onClick 事件中调用两个函数不运行函数

React JS: Calling two functions in an onClick event does not run functions

javascript

reactjs

react-spring

React JS：在 onClick 事件中调用两个函数不 运行 函数

React JS: Calling two functions in an onClick event does not run functions

javascript

reactjs

react-spring

React JS：在 onClick 事件中调用两个函数不运行函数