Реагировать на получение элемента из дочернего элемента после рендеринга - PullRequest
Новая
       12

Реагировать на получение элемента из дочернего элемента после рендеринга

0 голосов
/ 11 июля 2020

Пожалуйста, помогите мне со следующей проблемой: я использую response 15.4.0, react- bootstrap 0.32.1,

Мне нужно отобразить datepicker (Bootstrap) из модального ( который является компонентом, запускаемым кнопкой).

Я пробовал использовать refs на входе безрезультатно (this.refs на componentDidMount () пусто {});

Поскольку this является дочерним компонентом, и componentDidMount () вызывается перед родительским (не по запросу, поэтому, когда я пытаюсь щелкнуть свой ввод, элемент не существует в DOM)

Caller: 

<ModalRequestChange key={'request-change' + row.id} id={row.id}  props={this.props} />

Модальный компонент: 

    componentDidMount() {
        var date_input = $('input[name="date"]');
        var options = {
            format: 'mm/dd/yyyy',
            showMeridian: true,
            todayHighlight: true,
            autoclose: true,
            todayBtn: true,
            startDate: new Date(),
            minuteStep: 4,
            position: "bottom left",
            origin: "top left",
            orientation: "right",
        };
        date_input.datepicker(options).on('changeDate', (e) => {
            this.handleChange(e);
        });
    }


    render() {
        return (
            <div>
                {this.state.isLoading ? <Loader/>: ''}
                <Modal backdrop={'static'} attentionClass={''} show={this.props.show} onHide={this.close} backdrop='static' keyboard={false} attentionClass={''}>
                    <Modal.Header closeButton>
                        <Modal.Title>Edit Request Campaign</Modal.Title>
                    </Modal.Header>
                    <Modal.Body>
                        <div>Please use this form to modify your request.</div>
                        <form ref="form">
                            <div className="row">
                                <div className="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                        <input className="form-control" id="date" type="text" ref="date" name="date" onChange={this.handleChange} value={this.state.fields.date} onKeyDown={this.handleKeyDown} required/>
                                        <label className="form-control-placeholder" htmlFor="date">When do you need this HTML by? mm/dd/yy *</label>
                                        <span className="glyphicon glyphicon-calendar form-control-feedback icon-calendar"><i className="icon-th"></i></span>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </Modal.Body>
                </Modal>
            </div>
        );
    }

Заранее спасибо.

1 Ответ

0 голосов
/ 14 июля 2020

Я нашел решение, если у вас такая же проблема, я оборачивал свой Modal (response- bootstrap modal) на другой компонент, поэтому мне нужно было передать функцию onEntered компоненту компонента.

Вызывающий: 

  setDatePicker() {
        var options = {
            format: 'mm/dd/yyyy',
            showMeridian: true,
            todayHighlight: true,
            autoclose: true,
            todayBtn: true,
            startDate: new Date(),
            minuteStep: 4,
            position: "bottom left",
            origin: "top left",
            orientation: "right",
        };

        $('input[name="date"]').datepicker(options).on('changeDate', (e) => {
            this.handleChange(e);
        });
    }

<ModalRequestChange key={'request-change' + row.id} id={row.id}  props={this.props} onEntered={this.setDatePicker()}/>

Модальный: 

    render() {
        return (
            <div>
                {this.state.isLoading ? <Loader/>: ''}
                <Modal show={this.props.show} onHide={this.close} backdrop='static' keyboard={false} attentionClass={''} onEntered={this.props.onEntered.bind(this)}>
                    <Modal.Header closeButton>
                        <Modal.Title>Edit Request Campaign</Modal.Title>
                    </Modal.Header>
                    <Modal.Body>
                        <div>Please use this form to modify your request.</div>
                        <form ref="form">
                            <div className="row">
                                <div className="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                        <input className="form-control" id="date" type="text" ref="date" name="date" onChange={this.handleChange} value={this.state.fields.date} onKeyDown={this.handleKeyDown} required/>
                                        <label className="form-control-placeholder" htmlFor="date">When do you need this HTML by? mm/dd/yy *</label>
                                        <span className="glyphicon glyphicon-calendar form-control-feedback icon-calendar"><i className="icon-th"></i></span>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </Modal.Body>
                </Modal>
            </div>
        );
    }

Таким образом вы можете полностью отрисовать модальный DOM и работать с ним.

...