我想使用DatePicker通过Redux表单选择日期。我创建这个:
import React from 'react'; import DatePicker from 'react-datepicker'; import 'react-datepicker/dist/react-datepicker.css'; export default field => ( <div> <DatePicker onChange={field.value} selected={field.value} isClearable={true} > {field.children} </DatePicker> {field.meta.touched && field.meta.error && <span className="error">{field.meta.error}</span>} </div> ); <div className="form-group"> <div className="col-xs-12 col-sm-3 "> <div className="label" htmlFor="date-to">DATE TO</div>{' '} <Field id="date-to" name="date-to" component={DateInput} /> </div> </div>
但是它不会返回任何值,并且不会在字段中显示日期,我该怎么办?
您希望包装DatePicker元素,使其可以用作“字段”上的组件,如下所示:
const renderDatePicker = ({input, placeholder, defaultValue, meta: {touched, error} }) => ( <div> <DatePicker {...input} dateForm="MM/DD/YYYY" selected={input.value ? moment(input.value) : null} /> {touched && error && <span>{error}</span>} </div> ); export default renderDatePicker
有关更多信息,请参见此GitHub问题:https : //github.com/Hacker0x01/react- datepicker/issues/543