Реагировать модально не закрываясь на клик - PullRequest
Новая
       41

Реагировать модально не закрываясь на клик

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

У меня есть список из нескольких components, каждый из которых открывает Modal при нажатии. Я передаю метод onHide каждому Modal, который должен закрывать модальное положение после нажатия кнопки закрытия, но ничего не происходит.

Я зарегистрировал клик, и клик зарегистрирован, но состояние не меняется, когда Seances.js вызывается в *1008*. Что я делаю не так?

Seances.js 

    class Seances extends Component {

    constructor(props) {
        super(props);

        this.state = {
            modalShow: false
        };
    }


    render() {
        const seances = this.props.seances;
        const handleDeleteUser = this.props.handleDeleteUser;
        let modalClose = () => this.setState({ modalShow: false });

        return (

            <Fragment>
                {seances && seances.length > 0 ? (
                    seances.map(({devices, interval, startDate, endDate, status}, index) => (
                        <div className="card" style={{marginBottom: '7px', width: '100%'}} key={index} onClick={() => this.setState({ modalShow: true })}>
                            <div className="card-body">
                                <h5 className="card-title">Seansi nr: {index}</h5>
                                <p className="card-text">Seadmed: {devices}</p>
                                <p className="card-text">Algus aeg: {startDate}</p>
                                <p className="card-text">Lõpp aeg: {endDate}</p>
                                <p className="card-text">Intervall: {interval}</p>
                                <p className="card-text">Staatus: {status}</p>
                                <button type="button" className="close float-right" aria-label="Close"
                                        onClick={() => handleDeleteUser(index)}>
                                    <span aria-hidden="true">×</span>
                                </button>
                                <ResultModal id={1}
                                    show={this.state.modalShow}
                                    onHide={modalClose}/>
                            </div>


                        </div>
                    ))
                ) : (
                    <div>
                        <p>Aktiivsed seansid puuduvad</p>
                    </div>
                )}
            </Fragment>
        );
    }
}

Seances.propTypes = {
    handleDeleteUser: PropTypes.func.isRequired,
    seances: PropTypes.arrayOf(
        PropTypes.shape({
            devices: PropTypes.string.isRequired,
            interval: PropTypes.string.isRequired,
            startDate: PropTypes.string.isRequired,
            endDate: PropTypes.string.isRequired,
            status: PropTypes.string.isRequired
        })
    )
};
export default Seances;

ResultModal.js 

    class ResultModal extends React.Component {

    changeHandler = event => {
        this.setState({ [event.target.devices]: event.target.value });
    };

    getPickerValue = (value) => {
        console.log(value);
    }

    render() {
        return (
            <Modal
                show={this.props.show} onHide={this.props.onHide}
                size="lg"
                aria-labelledby="contained-modal-title-vcenter"
                centered
            >
                <Modal.Header closeButton>
                    <Modal.Title id="contained-modal-title-vcenter">
                        Seance nr: 1
                    </Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <div>
                        <form>

                            {/*First row*/}
                            <MDBRow >
                                <MDBCol md="4" >
                                    <h4 id="section1"><strong>Result</strong></h4>
                                    <p>Integer eleifend massa nec sem rhoncus tristique. Mauris pulvinar justo vitae
                                        nisi pretium tincidunt. Nulla dolor nibh, porta ut fringilla vel, maximus at mauris.
                                        Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut aliquam
                                        malesuada turpis eu luctus. In eget sapien quis urna cursus tempus.
                                        In eu placerat elit, ut tristique justo</p>
                                </MDBCol>
                            </MDBRow>

                            <Button variant="secondary" onClick={this.props.onHide}>
                                Close
                            </Button>
                            <MDBBtn color="success" type="submit" className="float-right">
                                Convert to File
                            </MDBBtn>
                        </form>
                    </div>
                </Modal.Body>
            </Modal>
        );
    }
}

ResultModal.propTypes = {
    onHide: PropTypes.func.isRequired,
    show: PropTypes.bool.isRequired
};

export default ResultModal;

1 Ответ

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

Вы не должны вызывать этот код в методе рендеринга: 

let modalClose = () => this.setState({ modalShow: false });

Здесь документ , который сказал:

1012 * визуализации *

Вызов setState здесь делает ваш компонент претендентом на создание бесконечных циклов. render должен оставаться чистым и использоваться для условного переключения между фрагментами JSX / дочерними компонентами на основе состояния или реквизита. Обратные вызовы в рендеринге могут использоваться для обновления состояния, а затем повторного рендеринга в зависимости от изменения.

Вместо этого вы должны изменить ваше модальное шоу, например, через handleDeleteUser или по нажатию кнопки закрытия. 

...
handleDeleteUser (e) {
   ...
   ...
   this.setState({ modalShow: false });
}
...
...