渲染后从 child 获取元素

Question

请帮我解决以下问题，我正在使用反应 15.4.0，react-bootstrap 0.32.1，

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

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

因为这是一个 child 组件，componentDidMount() 在 parent 之前被调用（不是按需所以当我尝试单击我的输入时，该元素不存在于 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 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>
        );
    }

提前致谢。

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 模态上获得完全渲染并对其进行操作。

渲染后从 child 获取元素

React get element from child after render

javascript

datepicker

reactjs