Question

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

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

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

isShowModal的

初始状态为false。因此，当第一次发生手柄单击时，isShowModal将为true。在模式中，我有setState，其当前状态值为isShowModal。但是，在整个组件中，其取值为'false'。问题是什么？为什么它不更新状态。两个模态独立工作良好。但是，我需要在第一个模式的点击事件发生后打开一个模式。

如何使用此isShowModal状态做到这一点。模态代码工作正常。

Answer 1

尝试一下

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

Answer 2

您可以尝试使用现代javascript（）=>函数

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

因为可能this引用了事件监听器。

如果使用箭头功能然后this将始终引用类属性

Answer 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 }));
}

Answer 4

或者您可以将函数绑定在类构造函数中，例如

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

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

4 个答案: