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

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

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

为什么只有我的onClick功能之一执行？

1 个答案: