具有React-Datepicker问题的Formik字段
具有React-Datepicker问题的Formik字段
提问于 2021-09-15 22:10:32
我正在使用Formik及其Field组件为动态表单创建可重用的字段。
我在尝试使用Field组件实现React-Datepicker时遇到了问题。我的问题是，当我将日期选取器组件放入Field组件中时，我无法手动键入希望输入的日期。我可以直接从日历中选择日期，但不能键入日期。当我尝试时，它会自动填写我输入的日期(例如，输入2会显示02/01/2021)。然而，验证正在工作，值正在设置，尽管它不是我想要的。
当我将日期选择器组件移到Field组件之外时，它的行为正常，但我无法访问错误，也无法使用Formik验证它。我不确定是什么原因导致日期选择器自动完成。
我可以使用Field或不使用Field，但我想将日期选择器与Formik连接起来。我可以使用Formik中的setFieldTouched和handleChange，但是setStatus和setFieldError也不能工作，所以我无法手动添加错误。
你知道这是什么原因造成的吗？我是不是把这两个连接错了？
<Field name='datepicker' as={datepickerComp} validate={validate} />
const [date, setDate] = React.useState(null)
React.useEffect(() => {
handleChange({target: {name: 'datepicker', value: formattedDate(date)}})
}, [handleChange, date])
const onChangeHandler = (val) => {
setFieldTouched('datepicker', true);
setDate(val)
}
const datepickerComp = (props) => (
<DatePicker
id="datepicker"
name="datepicker"
selected={date}
onChange={onChangeHandler}
required
/>
)
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-09-16 19:32:23
所以我不知道为什么使用Field的as属性会导致组件崩溃。但是，我发现了一种将日期选择器作为子组件使用的变通方法。它运行验证，我可以从日历中选择日期并输入日期。
<Field name = "date" validate = {validate}>
{({field, form, meta}) => (
<DatePicker
name="date"
selected={values.date || null}
onChange(date => setFieldValue("date", date
/>
)}
</Field>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69200289
复制相关文章
相似问题
腾讯云开发者
