onclick 事件发生后状态未更新-reactjs答案

【问题标题】：state is not updating after onclick event occurs - reactjsonclick 事件发生后状态未更新-reactjs
【发布时间】：2019-12-24 07:05:58
【问题描述】：

在我的应用程序中，我必须一个接一个地显示两个模态。当我单击第一个模态的是按钮时，第二个模态将打开。因此，我在第一个模态句柄单击时设置一个布尔值，如果它为真，则将填充第二个模态。

handleShowFirstModal() {
  this.saveJobsData();
  store.getOtherData(null);
  this.handleShow2ndModal();
  this.setState({ isOpenModal: false, WarningModalContentProps: {} });
}

handleShow2ndModal(e) {
  e.stopPropagation();
  this.setState(prevState => ({ isShowModal: !prevState.isShowModal }));
}

isShowModal 的初始状态为假。因此，当第一次手柄点击发生时，isShowModal 将为真。在模态中，我设置了当前状态值为 isShowModal 的 setState。但是，在整个组件中，它的值都是“假”。问题是什么？为什么它不更新状态。两个模态独立工作正常。但是，我需要在第一个模态的点击事件发生后打开一个模态。

我怎样才能使用这个 isShowModal 状态来做到这一点。模态代码工作正常。

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

试试这个

handleShow2ndModal =(e)=>{
 e.preventDefault();
 this.setState(prevState =>({isShowModal:!prevState.isShowModal}));
}

【讨论】：

【解决方案2】：

你可以尝试使用现代 javascript ()=> 函数

handleShow2ndModal =(e)=>{
 e.stopPropagation();
 this.setState(prevState =>({isShowModal:!prevState.isShowModal}));
}

因为可能this 指的是事件监听器。

如果你会使用箭头函数那么this 将始终引用类属性

【讨论】：

【解决方案3】：

在handleShowFirstModal 方法中，您正在调用方法this.handleShow2ndModal();。所以状态isOpenModal初始值为true。

然后下一行 (this.setState({isOpenModal : false, WarningModalContentProps:{}})) 将状态更新为 false。这就是您总是在整个组件中获得“假”值的原因。

可能的解决方案：

handleShowFirstModal() {
  this.saveJobsData();
  store.getOtherData(null);
  // this.handleShow2ndModal();
  this.setState({ isOpenModal: false, WarningModalContentProps: {} });
}

handleShow2ndModal(e) { // Call this method when you are close the first popup model.
  e.stopPropagation();
  this.setState(prevState => ({ isShowModal: !prevState.isShowModal }));
}

【讨论】：

【解决方案4】：

或者你可以在类构造函数中绑定你的函数

this.handleShowFirstModal = this.handleShowFirstModal.bind(this);

【讨论】：