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 模態上并對其進行操作。
添加回答
舉報
