带有自定义组件的 Material ui 文本字段和 Formik 表单

Posted 2023-02-19

【中文标题】带有自定义组件的 Material ui 文本字段和 Formik 表单

【英文标题】：Material ui Text Field and Formik form with custom compnents

【发布时间】：2021-10-07 22:50:22

【问题描述】：

嘿，我正在使用 FORMIK 表单，我有一堆自定义组件，基本上是一个文本字段和选择组件。我现在想添加一个日期和时间选择器，并决定使用 Material ui 日期时间选择器。到目前为止，这是我的代码：

import TextField from '@material-ui/core/TextField';

在表单中定义字段

<TextField
                        id="date"
                        label="Proposed Match Date"
                        type="date"
                        value=selectedDate
                        onChange=handleDateChange
                        InputLabelProps=
                            shrink: true,
                        
                     />

然后我尝试像这样捕获 Submit 上的值：-

onSubmit=async (values, setSubmitting) => 
                setSubmitting(false)
                console.log(values)

除日期选择器字段外，所有字段都在传递值。它传递了一些奇怪的数据，但没有传递值。

我正在像这样更改日期选择器组件的 onChange 状态

const handleDateChange = (event) => 
        setSelectedDate(event.target.value);

这是我在控制台记录值时看到的内容

cmonth: "August"
cyear: 2021
format: "bestof3"
location: "phase5"
opponent: "Gaurav Verma"
[[Prototype]]: Object
constructor: ƒ Object()
hasOwnProperty: ƒ hasOwnProperty()
isPrototypeOf: ƒ isPrototypeOf()
propertyIsEnumerable: ƒ propertyIsEnumerable()
toLocaleString: ƒ toLocaleString()
toString: ƒ toString()
valueOf: ƒ valueOf()
__defineGetter__: ƒ __defineGetter__()
__defineSetter__: ƒ __defineSetter__()
__lookupGetter__: ƒ __lookupGetter__()
__lookupSetter__: ƒ __lookupSetter__()
get __proto__: ƒ __proto__()
set __proto__: ƒ __proto__()

​

这是正确的方法吗？这可行吗，如果可行，模式是什么？

【问题讨论】：

传入的奇怪数据是什么？可能是未解析的日期

我用我在 console.log 中看到的内容更新了问题。

【参考方案1】：

如果您需要的是 material-ui 和 Formik 的日期和时间选择器，那么我建议您使用 Formik Material-UI Pickers 这是Code Sandbox

代码会是这样的

     <Field
          component=DateTimePicker
          name="dateTime"
          label="Date Time"
        />

【参考方案2】：

您不需要单独处理日期文本字段的状态。 FORMIK 将处理它的状态。所以你应该像这样修改你的 TextField：

<TextField
      id="date"
      label="Proposed Match Date"
      type="date"
      value=values.date
      onChange=handleChange
      InputLabelProps=
        shrink: true,
        
/>

并从您的代码中删除您的 handleDateChange 函数，即：

const handleDateChange = (event) => 
        setSelectedDate(event.target.value);

【讨论】：

如果你使用FORMIK表格，应该定义值

如果可以，请将您的完整源代码分享给codesandbox.io