有没有人成功地将 react-dates DateRangePicker 与 formik 集成在一起？

IT技术 reactjs formik react-dates
2021-04-26 12:19:13

我对如何处理 react-dates[DateRangePicker] onDatesChange 和 onFocusChange 感到困惑，因为它们每个都有两个值。 onDatesChange应该能够设置多个值，即开始日期和结束日期。

我试图用 formik 围绕 daterangepicker 构建一个自定义包装器。

检查控制台是否有错误

`<div className="form-group">
    <label>DatePickerWithFormik</label>
    <Field component={DatePickerWithFormik} name="DatePickerWithFormik" 
    className="form-control" />
</div>`

`export const DatePickerWithFormik = ({ startDateId, endDateId, form: { setFieldValue, setFieldTouched }, field, ...props }) => {
    const [focused, setFocused] = useState(null); // this will be removed
    return(
        <div>
            {/* {console.log('Inside datpicer', field.name)} */}
            <DateRangePicker 
                {...props}
                startDateId="startDateId"
                endDateId="endDateId"
                onDatesChange={(value) => 
                field.onChange(setFieldValue(field.name, value) )}
                onFocusChange={focused => setFocused(focused)}
                focusedInput={focused}
                startDate={field.startDate}
                endDate={field.endDate}
            />
            {/* {console.log(field)} */}
        </div>
    );
};
`
  1. 预期结果：应该能够将开始和结束日期保存在本地状态并显示在屏幕上。

参考工作链接：https : //codesandbox.io/s/l72w6n8l0m

1个回答

您需要使用 startDate 和 endDate 初始化表单：

const formInitialValues = {
  // DatePickerWithFormik: null
  startDate: null,
  endDate: null
};

然后onDatesChange像这样设置：onDatesChange={handleDatesChange}并在handleDatesChange函数中更新值：

const handleDatesChange = ({ startDate, endDate }) => {
    setStartDate(startDate);
    setEndDate(endDate);
    setFieldValue("startDate", startDate);
    setFieldValue("endDate", endDate);
  };

演示：https : //codesandbox.io/s/m39w2onqky

编辑：
由于您不会使用任何状态，因此您可以values像这样使用表单属性：

<DateRangePicker
        startDate={values.startDate}
        startDateId="tata-start-date"
        endDate={values.endDate}
        endDateId="tata-end-date"
        onDatesChange={handleDatesChange}
        focusedInput={focusedInput}
        onFocusChange={focusedInput => setFocusedInput(focusedInput)}
      />

工作演示：https : //codesandbox.io/s/ppv546qxz7

其它你可能感兴趣的问题
上一篇ReactJS：无法为私人屏幕创建保护路由 下一篇CKEditor 5 React 自定义图片上传