React material-ui KeyboardDatePicker 和 Formik 不起作用

Posted 2023-02-22

【中文标题】React material-ui KeyboardDatePicker 和 Formik 不起作用

【英文标题】：React material-ui KeyboardDatePicker and Formik not working

【发布时间】：2020-06-16 13:12:49

【问题描述】：

我正在使用material-ui 创建一个表单，并使用Formik 和Yup 进行验证。

TextField 组件运行良好，但是，KeyboardDatePicker 组件在控制台中出现以下错误

_onChange 不是函数

现在正在展示

类型未定义。

下面是带有代码的cbs。 https://codesandbox.io/s/agitated-dust-wf6fn

【问题讨论】：

我运行了您的代码，但没有看到该错误。然而，我在findDOMNode

中看到了其他类型的错误

【参考方案1】：

只需将onChange 函数改成this：

onChange=(name, value) => formik.handleChange('dob', value)

【讨论】：

代码沙箱不工作。更改日期在日期选择器中没有更改

【参考方案2】：

您可以使用.setFieldValue 手动设置onChange 事件的值。

 onChange=val => 
      console.log("___", val);
      formik.setFieldValue("dob", val);
  

此方法适用于任何用例。

【讨论】：

完美运行，谢谢。为什么这个组件不能与 Formik 的 handleChange 一起使用？有必要定义一个自己的

handleChange 依赖于 e.target.name ，如果 datePicker 不起作用。

e.target 在 DatePicker 中将始终未定义

有趣。谢谢

【参考方案3】：

这是相同的沙盒演示

https://codesandbox.io/s/formik-material-ui-date-picker-with-yup-validate-f3mdp