Блог

Я делаю сопоставление для разных продуктов, и у каждого продукта есть кнопка «сообщить». Как только кнопка нажата, появляется модальное изображение и отображаются соответствующие сведения о продукте. Но когда я нажимаю на любую кнопку «сообщить», все остальные модалы срабатывают нормально. Я не извлекаю правильные детали. Это должно быть только на том конкретном продукте, на который я нажал. Я пытался исследовать здесь и нашел похожие вопросы, но все еще не могу понять. Кто-нибудь может мне помочь? Это мои коды https://codesandbox.io/s/small-wildflower-o3vfy

Это мой набор состояний:

     this.state = {
  reportModalShow: [false, false],
};
 let reportModalClose = (key) => {
  this.state.reportModalShow[key] = false;
};
  {this.props.custOrders.map((custOrder, key) => {
      return (
              
                  <Button
                    variant="danger"
                    style={{ marginLeft: 5 }}
                    onClick={() => {
                      console.log("Report Button Clicked");
                      let tmp = this.state.reportModalShow;
                      tmp[key] = !tmp[key];
                      this.setState({ reportModalShow: tmp });
                    }}
                  >
                    Report
                  </Button>
                  <ReportModal
                    show={this.state.reportModalShow[key]}
                    key={key}
                    onHide={reportModalClose}
                    order={custOrder}
                    orders={this.props.custOrders}
                    orderItems={this.props.custOrderItems}
                  />
                </ButtonToolbar>
 

Это мой модальный:

   <Modal
    show={this.props.show}
    size="lg"
    aria-labelledby="contained-modal-title-vcenter"
    centered
  >
    <Modal.Header closeButton onClick={this.props.onHide}>
      <Modal.Title id="contained-modal-title-vcenter">
        Report an Issue
      </Modal.Title>
    </Modal.Header>
    <Modal.Body>
      <FormControl component="fieldset" style={{ marginTop: 10 }}>
        {/* <FormLabel component="legend">Issue Type </FormLabel> */}
        <RadioGroup
          aria-label="account"
          name="account1"
          value={this.state.issueType}
          onChange={this.handleChange}
        >
          <FormControlLabel
            value="missingItem"
            control={<Radio />}
            label="Missing Items"
          />
          <FormControlLabel
            value="incorrectOrder"
            control={<Radio />}
            label="Incorrect Order"
          />
      
          />
        </RadioGroup>
      </FormControl>
    </Modal.Body>
    <Modal.Footer>
      <Button variant="danger"   onClick={this.props.onHide(this.props.key)}>
        Cancel
      </Button>
      <Button onClick={this.report}>Report</Button>
    </Modal.Footer>
  </Modal>
 

Вам следует изменить какую-то часть своего кода. Прежде всего, когда пользователь нажимает на cancel close кнопку или, вам нужно изменить текущее состояние модала с помощью индекса. Это можно сделать с помощью неглубокой копии с reportModalShow :

   reportModalClose = (event, key) => {
    let reportModalShow = [...this.state.reportModalShow];
    reportModalShow[key] = false;
    this.setState({ ...this.state, reportModalShow }, () => {
      console.log(this.state);
    });
  };
 

Также в onHide случае ReportModal вы не отправили параметр индекса текущего модала. Поэтому вам нужно изменить его на :

 onHide={(e) => {
     this.reportModalClose(e, key);
}}
 

В конце измените onClick событие кнопки «Закрыть» и «Отмена Modal.jsx » на «в», чтобы:

 onClick={(event) => this.props.onHide(event)}