Нажатие кнопки выскакивает все модалы вместо показа только - PullRequest
Новая
       21

Нажатие кнопки выскакивает все модалы вместо показа только

0 голосов
/ 22 мая 2019

Я передаю данные в модал от родительского компонента.Я показываю модал по нажатию кнопки.Но модальное тело не содержит желаемых данных.Он добавляет все данные внутри тела вместо того, чтобы показывать только необходимое содержимое.

Это родительский компонент 

{this.state.response.map((value, id) => {
  return (
    <div className="col-md-3 file-card-viewSection">
      <Button
        id={id+1}
        onClick={(e) => {this.setState({ showDocumentsModal: true })}}>
        <i className="fas fa-eye"></i>
      </Button>
    </div>
    <ViewDocumentDetailsModal
      show={this.state.showDocumentsModal}
      onHide={this.modalClose.bind(this)}
      documentdata={value.result} />
  );
})}

Это дочерний компонент, содержащий модал начальной загрузки 

class viewDocumentDetailsModal extends Component {

render() {
    console.log(this.props)
    return (
      <Modal
        {...this.props}
        size="lg"
        centered
      >
        <Modal.Header closeButton>
          <Modal.Title id="contained-modal-title-vcenter">
            Modal heading
          </Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <h4>Centered Modal</h4>
          <ReactJson src={this.props.documentdata} />

        </Modal.Body>
        <Modal.Footer>
          <Button onClick={this.props.onHide}>Close</Button>
        </Modal.Footer>
      </Modal>
    );
  }
}

Когда я нажимаю на кнопку, он отображает оба мода одновременно.Я не могу понять, почему.Пожалуйста, помогите мне.Спасибо.

Вот так я получаю вывод page

Это весь родительский компонент 

                            {this.state.response.map((value, id) => {
                                return(
                                <div>
                                    <Card className="mb-4">
                                        <Card.Body className="row file-card-row">
                                            <div className="col-md-1 file-card-index">
                                                {id+1}
                                            </div>
                                            <div className="col-md-4 file-card-filename">
                                                {value.result.Filename}
                                            </div>
                                            <div className="col-md-4 file-card-status">
                                                {value.result.Status}
                                            </div>
                                            <div className="col-md-3 file-card-viewSection">
                                                <Button id={id+1} onClick={(e) => {this.setState({ showDocumentsModal: true,  modalOpened: id  })}}>
                                                    <i className="fas fa-eye"></i>
                                                </Button>
                                            </div>
                                        </Card.Body>
                                    </Card>
                                </div>
                                );
                            })} 
                            <ViewDocumentDetailsModal
                                              show={this.state.showDocumentsModal}
                                              onHide={this.modalClose.bind(this)}
                                              documentdata={this.state.response[this.state.modalOpened].result}
                                            />                      
                        </div>

1 Ответ

1 голос
/ 22 мая 2019

Сначала я попытался отрегулировать отступ вашего кода (редактирование должно быть принято в первую очередь), но мне кажется, что в первом фрагменте кода вы возвращаете элемент <div> и <ViewDocumentDetailsModal> элемент без какого-либо родительского компонента: в React это не должно быть возможным (вы всегда должны возвращать один элемент, если используете метод render().

В любом случае, я думаю, что вы получаете более одного Модального, потому что элемент <ViewDocumentDetailsModal> возвращается внутри обратного вызова this.state.response.map(): таким образом, для каждого response вы возвращаете различный Модальный.

Если в this.state.response у вас есть данные для различных модальных, но вы хотите отобразить только один из них, вам нужно иметь другое свойство числа в состоянии, например this.state.modalOpened, в котором вы сохраняете индекс модальные данные, которые вы хотите отобразить. Затем в методе return() вы должны написать что-то вроде этого: 

<>
  {this.state.response.map((value, id) => {
    return (
      <div className="col-md-3 file-card-viewSection">
        <Button
          id={id+1}
          onClick={(e) => {this.setState({ showDocumentsModal: true, modalOpened: id })}}>
          <i className="fas fa-eye"></i>
        </Button>
      </div>
    );
  })}
  <ViewDocumentDetailsModal
    show={this.state.showDocumentsModal}
    onHide={this.modalClose.bind(this)}
    documentdata={this.state.response[this.state.modalOpened].result} />
</>
...