Модальный элемент не скрывается [React & React - Bootstrap] - PullRequest
Новая
       29

Модальный элемент не скрывается [React & React - Bootstrap]

0 голосов
/ 16 декабря 2018

Я создал модал с помощью React Bootstrap.Несмотря на то, что я использую функцию onHide, ничего не происходит.Вот мой модал: 

        <React.Fragment>
            <Modal
                {...this.props}
                bsSize="large"
                aria-labelledby="contained-modal-title-lg"
                show={this.state.showModal}
                onHide={this.handleHide}
             >
            <Modal.Body>
               ...
            </Modal.Body>
            <Modal.Footer>
               <Button id = "closeModal" variant="danger" onClick= 
               {this.handleHide.bind(this)}>
                            Save and close
               </Button>
            </Modal.Footer>
            </Modal>
        </React.Fragment>

Я передаю «show» из другого компонента, когда происходит щелчок по некоторому элементу.onClick для этого элемента указывается для: "showModal: true".Затем я передаю showModal другому компоненту, который отображает различные элементы в соответствии с выбранной опцией: 

{this.state.addingState && (
    <MyForm
        {...this.state.item}
        show={this.state.showModal}
        ...
    />
)}

Наконец, в компоненте MyForm у меня есть функция, которая передает реквизиты компоненту с модальным режимом: 

createModalComponent {
    ...
    let modalComponentProps= {
        ...
        show: this.props.show,
}

Итак, так происходит "шоу".В моем файле с модальным компонентом у меня есть функция для обработки hide: 

handleHide() {
    this.setState({ showModal: false });
}

Теперь в этом компоненте showModal инициализируется в таком состоянии: 

constructor(props) {
    super(props);

    this.state = {
        showModal: this.props.show
    };

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

Я пробовал много вещей.Другие переменные состояния, без инициализации showModal в состоянии и многое другое.При нажатии на кнопку или за пределы модальной, модальная все еще видна и не прячется.Я буду очень признателен за вашу помощь и / или советы, как это исправить.

Итак, путь showModal идет: родительский компонент (где происходит this.state.addingState) -> компонент MyForm (где пустьmodalComponentProps = {show: this.props.show, ... случается) -> фактический модальный компонент

Код на CodePen

Ответы [ 2 ]

0 голосов
/ 21 декабря 2018

Посмотрите на метод shouldComponentUpdate 

shouldComponentUpdate(nextProps) {
    return !isEqual(this.props, nextProps);
}

Вы проверяете только реквизиты, но изменяете состояние компонента.Исправьте метод или удалите его, и он будет работать

0 голосов
/ 16 декабря 2018

у вас есть 2 возможности: вы можете добавить метод к своему родителю и передать метод + результат шоу, как это (используйте то же имя реквизита и метод для лучшей практики, так что вы не будете смущены):

Parent 

<Modal
    {...this.props}
    bsSize="large"
    aria-labelledby="contained-modal-title-lg"
    show={this.state.showModal}
    handleHide={this.handleHide}
  >

Child 

   <MyForm
        show={this.props.showModal}
        handleHide={this.props.handleHide}
    />

Чтобы использовать модал от parent, вы можете назвать его так в child: this.props.handleHide (true).

Или вы позволяете дочернему элементу управлять состоянием самостоятельно, чтобы вы поместили метод и состояние в дочерний элемент, а не в родительский (в зависимости от архитектуры).

Не рекомендуется добавлять реквизитыв детском состоянии.Кроме того, вы можете использовать функцию es6, чтобы избежать связывания следующим образом: 

handleHide = () => this.setState({ showModal: false });
...