Question

我在弄清楚如何关闭渲染的组件时遇到麻烦。目前，我能够在第一页上打开模式组件，但随后我想在通过该组件单击按钮时将其关闭。我该怎么办？

<React.Fragment/>

Answer 1

您需要使模式组件调用onClose回调，以便父级可以将其关闭：

import React, { Component } from 'react';
  import AddModal from './addmodal';

  class Page extends Component {
    constructor(){
      super();
      this.state = { isModalOpen: false };
    }
    ...//skip
    handleAdd= () =>{
      this.setState({ isModalOpen: true });
    }
    handleClose= () =>{
      this.setState({ isModalOpen: false });
    }
    render(){
      return (
        <div>
          <button onClick={this.handleAdd} > Add </button>
          <AddModal isOpen={this.state.isModalOpen} handleClose={this.handleClose}/>
        </div>
        )
    }
  }


  import React, { Component } from 'react';

  class AddModal extends Component {
    // ... skip

    render(){
      return(
        <modal inOpen={this.props.isOpen} >
        <Button onClick={this.props.handleClose}> // call to parent
          Okay
        </Button>
          ...//skip
        </modal>
      )
    }
  }

  export default AddModal;

Answer 2

父组件将决定模式是否打开，因此拥有子状态。

在@jsdeveloper发布的内容的基础上，我认为您可以使用相同的函数来处理模式的打开和关闭来减少混乱。

我们将利用toggleModal函数，将isModalOpen的{{1}}更改为true，反之亦然。它使用一个回调，该回调采用false的先前状态值。

isModalOpen

所以最终文件应如下所示。

toggleModal = () => {
  this.setState(prevState => ({
    isModalOpen: !prevState.isModalOpen
  }))
}

如何在React中渲染的按钮单击时关闭？

2 个答案: