javascript - 为什么 onClick 中只有一个函数执行？

Question

当单击导航栏上的选项卡时，我尝试调用两个方法。我最初只调用了一种方法，直到我意识到我需要调用第二个方法来更新我的数据。问题是，当我尝试调用这两种方法时，只会执行其中一个方法，而不会同时执行两者。我之前在 onClick 方法中有多个函数，它们工作得很好，但我有点困惑为什么这种方式不起作用。任何帮助都会很棒，谢谢!

app.js

export default Class App extends React.Component{
 constructor(props){
  this.state = {
   OpenJobsDB: [],
   PendingJobsDB: [],
   CompletedJobsDB: [],
   page: undefined,
  };

  this.setPage = this.setPage.bind(this);
  this.PullJobsTables = this.PullJobsTables.bind(this);
 }
}
    PullJobsTables() {
        console.log("pulling jobs from DB");

        socket.emit('selectFromJobsWhereOpenAwaitingETAsAssigned', function (result) {
            this.setState({ OpenJobsDB: result });
        }.bind(this));

        socket.emit('selectFromJobsWherePending', function (result) {
            this.setState({ PendingJobsDB: result });
        }.bind(this));

        socket.emit('selectFromJobsWhereCompleteDeleted', function (result) {
            this.setState({ CompletedJobsDB: result });
        }.bind(this));
    }

    setPage(e) {
        console.log("inside setpage");
        var naviBtns = document.getElementsByClassName('NavigationBarButtons');
        for (var i = 0; i < naviBtns.length; i++) {
            naviBtns[i].style.backgroundColor = '#333a56';
            naviBtns[i].style.bottomBorder = '0';
        }
        e.target.style.backgroundColor = '#e14658';
        e.target.style.bottomBorder = '3px solid #FFA279';

        const page = e.target.name;
        this.setState(() => ({ page }))
        this.OpenNavigationBar('close');
        this.setState({
            showReportsList: false,
            showTablesList: false,
            showTimeOff: false,
        });
    }
}

我的 onClick 看起来像这样

<button onClick{() => {this.setPage.bind(this); this.PullJobsTables.bind(this);}}

在此示例中，唯一调用的是 PullJobsTables 方法，而不是 setPage 方法。这是我在类似情况下完成的方法，效果很好。这让我有点困惑，为什么它不同时调用两者。

Answer 1

这两个函数已经在构造函数中绑定(bind)了 this 。您还需要将事件传递给期望它的回调。

<button
  onClick={event => {
    this.setPage(event);
    this.PullJobsTables();
  }}
>