React组件切换模态框时无法关闭当前模态框的问题求助

Hey there! I see you're stuck trying to switch between two modals—you can get the new one to open, but the original just won't close. Let's work through this together and fix it up.

The Core Problem #

Right now, your click handler is only setting the new modal's state to true, but it's not updating the original modal's state to false. Since both states remain true, both modals end up visible at the same time. Lifecycle methods like componentDidMount aren't helpful here because they only run once when the component first mounts, not when you click a button to switch modals.

The Fix: Update Both States in One Go #

The simplest solution is to update both state properties in a single setState call when you trigger the modal switch. React will batch these updates, ensuring the original modal closes exactly when the new one opens.

Let's adjust your code step by step:

First, here's your existing state setup (for reference):

constructor(props) {
  super(props);
  this.state = {
    showBaseModal: true, // Modal 1 starts open
    codemodal: false     // Modal 2 starts closed
  };
  this.openCodeModal = this.openCodeModal.bind(this);
  // Make sure to bind your openprofile method too!
  this.openprofile = this.openprofile.bind(this);
}

Now, update your openprofile handler to toggle both states:

openprofile = () => {
  this.setState({
    showBaseModal: false, // Close the original modal
    codemodal: true       // Open the target modal
  });
}

Why This Works #

When you call setState with both properties, React merges these changes into the component's state and re-renders. Just make sure your modals are conditionally rendered based on these states, like so:

render() {
  return (
    <div>
      {/* Render Modal 1 only if showBaseModal is true */}
      {this.state.showBaseModal && (
        <Modal1>
          {/* Modal 1 content */}
          <button onClick={this.openprofile}>Switch to Profile Modal</button>
        </Modal1>
      )}

      {/* Render Modal 2 only if codemodal is true */}
      {this.state.codemodal && (
        <Modal2>
          {/* Modal 2 content */}
        </Modal2>
      )}
    </div>
  );
}

Quick Recap #

You don't need fancy lifecycle methods for this—just update both state properties in the same setState call when switching modals. This guarantees the original modal closes the moment the new one appears.

内容的提问来源于stack exchange，提问作者Mahmonir Bakhtiyari