用 redux-form 反应 Datepicker
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 表单时 return 一个空对象不绑定日期选择器的值...
我的 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?
})
}
对于未来的读者,只需转到此 link:
首先,我创建了上面 link 中提到的组件,并在其中传递了选定的道具。就我而言:
<Field
name="due_date"
component={DatePickerComponent}
selected={this.state.date_of_briefing} />
你必须制作一个自定义组件来验证和使用带有 redux-form 的日期选择器
试试这个
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>
)
然后将 props 传递给该自定义组件
<Field
name="date_of_birth"
component={datePicker}
type="text"
selected={this.state.date_of_birth}
onChange={this.handleChange.bind(this)}
className="form-control"
/>
如何让 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 表单时 return 一个空对象不绑定日期选择器的值...
我的 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?
})
}
对于未来的读者,只需转到此 link:
首先,我创建了上面 link 中提到的组件,并在其中传递了选定的道具。就我而言:
<Field
name="due_date"
component={DatePickerComponent}
selected={this.state.date_of_briefing} />
你必须制作一个自定义组件来验证和使用带有 redux-form 的日期选择器
试试这个
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>
)
然后将 props 传递给该自定义组件
<Field
name="date_of_birth"
component={datePicker}
type="text"
selected={this.state.date_of_birth}
onChange={this.handleChange.bind(this)}
className="form-control"
/>