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

Question

嘿，我正在使用 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__()

​

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

Answer 1

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

代码会是这样的

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

Answer 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);