反應模態打開第二個模態但第二個模態不起作用

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;

Answer 1

在父組件“返回”時更改以下行：

從：

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

至：

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

希望它能解決問題。

Answer 2

從觀察：

• 表演道具總是true 。 設置show={this.state. openDeleteAppointment} show={this.state. openDeleteAppointment}
• onHide 沒有設置正確的 state。 它應該設置openDeleteAppointment而不是openDeleteClient