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

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”传递给组件组件。

呼叫者：

  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 模态上并对其进行操作。