Question

我尝试将参数传递给状态回调函数，该函数具有click事件监听器。

参数没有使用最新值更新，我总是得到第一次点击时设置的值。

这是我试过的：

this.setState({ idx: i0 === this.state.idx ? null : i0 }, () => {
   document.addEventListener('click', this.closeMenu.bind(null, i0, event));
});

closeMenu(i0, event) {
    event.stopPropagation();
    this.setState({ idx: null }, () => {
      document.removeEventListener('click', this.closeMenu);
    });
  }

我希望closeMenu函数参数i0值应该始终是从父函数传递的最新值。

Answer 1

要考虑的一些要点。为什么要在回调中将侦听器设置为setState，setState是异步的，谁能知道在这种情况下会发生什么？如果您没有谴责按钮单击（或如何触发此功能），如果多次初始化监听器会怎样？另一点，你在回调setState时这样做，如果在这一点上卸载组件会怎么样？这显然是一种可能性。我认为正确的选择是在componentDidMount中设置监听器并在componentWillUnmount中将其删除。所以它应该是这样的：

componentDidMount(){
    document.addEventListener('click', this.closeMenu);
}

componentWillUnmount(){
    document.removeEventListener('click', this.closeMenu);
}

还有一点，在closeMenu或任何地方使用道具只是你的箭头功能如下：

 closeMenu =  event => {
     let i0 = this.props.i0;
     event.stopPropagation();
     ...
}

这样可以避免传递额外的参数，因为它会将函数绑定到组件上下文，并允许您直接访问props。如果你详细说明你想要实现的目标，我可以尝试更好地解释。

如何将参数传递给状态回调函数

1 个答案: