React material-ui KeyboardDatePicker 和 Formik 不起作用答案

【问题标题】：React material-ui KeyboardDatePicker and Formik not workingReact material-ui KeyboardDatePicker 和 Formik 不起作用
【发布时间】：2020-06-16 13:12:49
【问题描述】：

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

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

_onChange 不是函数

现在正在展示

类型未定义。

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

【问题讨论】：

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

标签： reactjs material-ui formik yup

【解决方案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

【讨论】：