javascript - 反应模态打开第二个模态但第二个模态不起作用

Question

我正在开发一个带有 GraphQl 后端的 React 项目。我有一个模式，用户可以在其中查看有关主题的更多详细信息。在该模式中，您可以单击删除，这会打开一个新模式，您需要在其中确认是否要删除。当按下是时，它应该被删除并且模式应该关闭。当按下 no 时，模态应该只是关闭。删除主题作品。如果我按是删除它，但模态不会关闭，当我按否时，模态也不会关闭。谁能解释我为什么以及如何解决这个问题？

父模态：

class CalenderModal extends React.Component {

  constructor(props) {
    super(props);
    this.state = {

      openDeleteAppointment: false,

    };
    this.openDeleteAppointment = this.openDeleteAppointment.bind(this);
  }


  handleRemove = () => {
    this.props.onRemove();
  }

  openDeleteAppointment() {

    this.setState({
      openDeleteAppointment: true,
    })

  }


  render() {


    return (
      <React.Fragment>



          <div className="customModal">
            <div className="modal-header">

              <h5 className="customModal__text"> Appointment summary</h5>

              <button className="btn modal__button__red" onClick={() => { this.openDeleteAppointment() }}>Delete</button>

              {this.state.openDeleteAppointment &&
                <DeleteAppointmentModal appointment={this.state.id} onHide={() => this.setState({ openDeleteClient: false, id: null })} show />}

            </div>
            <div className="modal-container">

              <div className="summary">

              <button className="btn modal__button__cancel" onClick={this.handleRemove}>Cancel</button>
            </div>
          </div>


        }
      </React.Fragment>
    );



}

export default CalenderModal;

子模态：

class DeleteAppointmentModal extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            id: this.props.appointment,
        };

    }

    render() {
        const {id} = this.state
        const DELETE_MUTATION = gql`
   mutation DeleteMutation($id:ID! ) {
   deleteAppointment(id:$id) {
     id
   }
 }
     `
     console.log("delete id",this.state.id)
        return (
            <React.Fragment>
                {
                    <Modal
                        {...this.props}
                        size="lg"
                        aria-labelledby="contained-modal-update-client"
                        centered
                    >
                        <Modal.Header closeButton >
                            <Modal.Title id="contained-modal-title-vcenter" className="tittle">Delete appointment </Modal.Title>
                        </Modal.Header>
                        <Modal.Body>
                            <div className="delete-content">
                                Are you sure you want to delete this appointment?

                            </div>
                        </Modal.Body>
                        <Modal.Footer>
                        <button onClick={() => this.props.onHide() } className="btn no">No</button>
                            <Mutation mutation={DELETE_MUTATION}
                                variables={{id}}>
                                {/* onCompleted={() => this.props.history.push('/')} */}

                                {deleteMutation =>
                                    <button onClick={() => { deleteMutation(); this.props.onHide() }} className="btn yes">Yes</button>


                                }
                            </Mutation>

                        </Modal.Footer>
                    </Modal>

                }
            </React.Fragment>

        );
    }
}

export default DeleteAppointmentModal;

标签： javascriptreactjsmodal-dialogbootstrap-modal

Answer 1

On "return" of parent component change the following row:

from:

<DeleteAppointmentModal appointment={this.state.id} onHide={() => this.setState({ openDeleteClient: false, id: null })} show />}

to:

<DeleteAppointmentModal appointment={this.state.id} onHide={() => { this.setState({ openDeleteAppointment: false, id: null }); handleRemove(); }} show />}

Hope it solved the problem.