亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

渲染后反應從孩子那里獲取元素

渲染后反應從孩子那里獲取元素

心有法竹 2022-11-11 14:55:22
請幫我解決以下問題,我使用的是 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>        );    }提前致謝。
查看完整描述

1 回答

?
智慧大石

TA貢獻1946條經驗 獲得超3個贊

如果您遇到同樣的問題,我已經找到了解決方案,我將我的模態(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 模態上并對其進行操作。


查看完整回答
反對 回復 2022-11-11
  • 1 回答
  • 0 關注
  • 138 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號