渲染后反应从孩子那里获取元素

Question

请帮我解决以下问题，我使用的是 react 15.4.0，react-bootstrap 0.32.1，

我需要从模式（这是一个由按钮触发的组件）中显示一个日期选择器（Bootstrap）。

我已经尝试在输入上使用 refs 但无济于事（componentDidMount() 上的 this.refs 为空 {}）；

由于这是一个子组件，因此 componentDidMount() 在父组件之前被调用（不是按需调用，因此当我尝试单击我的输入时，DOM 上不存在该元素）

呼叫者：

<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>

                                </div>

                            </div>

                        </form>

                    </Modal.Body>

                </Modal>

            </div>

        );

    }

提前致谢。

Answer 1

如果您遇到同样的问题，我已经找到了解决方案，我将我的模态（react-bootstrap 模态）包装在另一个组件上，因此我需要将函数“onEntered”传递给组件组件。呼叫者：&nbsp; setDatePicker() {&nbsp; &nbsp; &nbsp; &nbsp; var options = {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; format: 'mm/dd/yyyy',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; showMeridian: true,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; todayHighlight: true,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; autoclose: true,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; todayBtn: true,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; startDate: new Date(),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; minuteStep: 4,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: "bottom left",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; origin: "top left",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; orientation: "right",&nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; &nbsp; $('input[name="date"]').datepicker(options).on('changeDate', (e) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.handleChange(e);&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; }<ModalRequestChange key={'request-change' + row.id} id={row.id}&nbsp; props={this.props} onEntered={this.setDatePicker()}/>模态：&nbsp; &nbsp; render() {&nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {this.state.isLoading ? <Loader/>: ''}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Modal show={this.props.show} onHide={this.close} backdrop='static' keyboard={false} attentionClass={''} onEntered={this.props.onEntered.bind(this)}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Modal.Header closeButton>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Modal.Title>Edit Request Campaign</Modal.Title>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Modal.Header>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Modal.Body>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>Please use this form to modify your request.</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <form ref="form">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="row">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="col-lg-12 col-md-12 col-sm-12 col-xs-12">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input className="form-control" id="date" type="text" ref="date" name="date" onChange={this.handleChange} value={this.state.fields.date} onKeyDown={this.handleKeyDown} required/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label className="form-control-placeholder" htmlFor="date">When do you need this HTML by? mm/dd/yy *</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span className="glyphicon glyphicon-calendar form-control-feedback icon-calendar"><i className="icon-th"></i></span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </form>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Modal.Body>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Modal>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; }通过这种方式，您可以获得完全呈现在 DOM 模态上并对其进行操作。