[英]React Datepicker with redux-form
如何使react-datepicker与redux-form绑定?
我有这个redux-form字段:
<Field name="due_date" component={props =>
<DatePicker
{...props}
readOnly={true}
selected={this.state.due_date}
value={this.state.due_date}
onChange={this.handleDueDate}
/>
} />
每当我提交redux表单时,确实会返回一个未绑定datepicker值的空对象...
我的onChange:
handleDueDate(date) {
this.setState({
due_date: moment(date).format('L')
}, () => {
// do I need to dispatch and action here to update the redux-form in state tree?
})
}
您必须制作一个自定义组件以使用redux-form验证和使用datepicker
尝试这个
const datePicker = ({ input, label, type, className, selected, meta: { touched, error } }) => (
<div>
<div>
<DatePicker {...input}
selected={selected} placeholder={label}
type={type} className={className}
peekNextMonth
showMonthDropdown
showYearDropdown
dropdownMode="select"
/>
{touched && error && <span className="error_field">{error}</span>}
</div>
</div>
)
然后将道具传递给该自定义组件
<Field
name="date_of_birth"
component={datePicker}
type="text"
selected={this.state.date_of_birth}
onChange={this.handleChange.bind(this)}
className="form-control"
/>
对于将来的读者,只需转到此链接: Redux表单中的DatePicker
首先,我在上面的链接中创建了类似提及的组件,并在其中传递了选定的道具。 就我而言:
<Field
name="due_date"
component={DatePickerComponent}
selected={this.state.date_of_briefing} />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.