Я хочу закрыть Popup, как мне это сделать?

Question

Когда я нажимаю кнопку AddAction на компоненте Addaction, я хочу закрыть всплывающее окно.

На самом деле, если я достигну метода onCloseAddActionModal в моем компоненте, всплывающем из компонента AddAction, моя проблема будет решена.

Компонент AddAction:

   class AddAction extends React.Component { 

    constructor() {
        super();
        this.state = {
            items: [{id:null, actiontype: null}],
            error: null,
            isLoaded: false,
            selectId: null,
        }
        this.handleCheckChieldElement = 
        this.handleCheckChieldElement.bind(this); // set this,  because you need get methods from CheckBox 
      }

    componentDidMount = () => {
        ....
    }

    fetchAdd = (carid, offboardingactiontypeid) => {
        ...
    }

    handleCheckChieldElement = (id, e) => {
        this.setState({selectId: id})
    }

    render() {
      const items = this.state.items;
      return (

        <div>
                <ul className="popupAddAction">
                    {
                        items.map((item) => {
                            return (
                                <li className="list" key={item.id}>
                                    <input  key={item.id} onClick= 
                    {(e) 
                                 => 

                    this.handleCheckChieldElement(item.id, 
                                e)} type="checkbox" /> 
                                 {item.actiontype}
                               </li>
                            )
                        })
                    } 
                </ul>
                <div className="popupAddAction--btn">
                    <button
                                    onClick=
                                    { () => 
                 this.fetchAdd(this.props.id, this.state.selectId)}
                                    className="btn btn-primary 
                                   popupAddAction--btn" 
                                >
                                    Add Action
                    </button>
                </div>
              </div>
               );
              }
             } 

           export default AddAction;

Popup Component:

         class OffBoarding extends Component {
          this.state = {
          openAddAction: false
          };

          onOpenAddActionModal = () => {
            this.setState({ openAddAction: true });
          };    

          onCloseAddActionModal = () => {
            this.setState({ openAddAction: false });
          };
          render(){
          return{
          <div>
          <Button className="btn btn-danger commentPlus" onClick= 
           {this.onOpenAddActionModal}> <FontAwesomeIcon icon= 
           {faPlus}/></Button>
          </div>
          {this.state.openAddAction ? 
              <div style={styles}>
               <Modal open= 
              {this.state.openAddAction} onClose= 
              {this.onCloseAddActionModal} center>
                                      <AddAction id= 
          {this.state.carid} 
                                   close= 
          {this.state.openAddAction}/>
                </Modal>
               </div> : null
             }}
          }}

Answer 1

Если флаг openAddAction имеет значение true, то только компонент addaction будет отображаться справа. Вместо открытия и закрытия модального режима добавьте приведенный ниже код для модального режима, а при добавлении модального действия в методе извлечения установите для openAddAction значение false. в вашем коде у вас есть связь от дочернего к родительскому, но вы пытаетесь закрыть модальное на основе дочернего, но модальное существует в родительском, поэтому создайте связь с родительским к дочернему для этой функции передачи через компонент

 <Modal isOpen = {this.state.openAddAction} center>
        <AddAction id= {this.state.carid}  
          closeModa={this.onCloseAddActionModal} />
 </Modal>

В моде addAction вы должны добавить вот так

fetchAdd = (carid, offboardingactiontypeid) => {
    this.setState({openAddAction:false});
    this.props.onCloseAddActionModal();
}

Вызовите этот метод closeModal в методе fetchAdd

Answer 2

Вы можете просто передать метод onCloseAddActionModal как prop при рендеринге компонента AddAction из компонента OffBoarding.И затем, вы можете вызвать эту переданную функцию как реквизит при нажатии кнопки «Добавить действие», т. Е.

Таким образом, в вашем всплывающем компоненте измените это:

 <AddAction id= 
      {this.state.carid} 
      close={this.state.openAddAction}/>

на this (передача функции в качестве реквизита):

<AddAction id= 
      {this.state.carid} 
      close={this.state.openAddAction}
      closeDialog={this.onCloseAddActionModal}/>

А затем в вашем компоненте AddAction измените это:

  <button
   onClick={() => 
   this.fetchAdd(this.props.id, this.state.selectId)}
   className="btn btn-primary popupAddAction--btn">
     Add Action
   </button>

на следующее (вызывающая функция передана как пропеллер на предыдущем шаге):

<button
  onClick=
  {() =>{ 
  this.fetchAdd(this.props.id, this.state.selectId);
  this.props.closeDialog();
  }}
  className="btn btn-primary popupAddAction--btn">
  Add Action
 </button>