无法在 Formik 中提交 TextField答案

【问题标题】：Can't submit TextField in Formik无法在 Formik 中提交 TextField
【发布时间】：2019-06-12 07:57:32
【问题描述】：

似乎找不到第一种方法有效而第二种方法无效的原因。

这两者的区别在于第二个是<TextField>，而不是<div>和<Field>。但是我看到的例子让<TextField> 工作得很好，我错过了什么？

【问题讨论】：

【解决方案1】：

您必须将组件传递给<Field />：

<Field component={TextField} name="password">

【讨论】：

你的意思是把改写成？它不会改变任何东西。

【解决方案2】：

您现在正尝试像这样使用它：

<Formik
    initialValues={initialValues}
    onSubmit={handleSubmit}
    render={props => (
        <Form>
            <TextField
                id="name"
                name="name"
                label="Name"
                value={props.values.name}
                onChange={props.handleChange}
                fullWidth
            />
        </Form>
    )}
/>

...哪个应该可以，您是否在控制台中遇到任何错误？

如果由于某种原因这不起作用，您可以尝试通过 Field render props 进行操作。
这个 sn-p 取自 Formik 文档。

 <Formik
   ...
      <Field
        name="lastName"
        render={({ field }) => (
          <input {...field} placeholder="password" />
        )}
      />
   ...
/>

如果你愿意，你可以使用 render 组件到 Field 组件来呈现自定义组件。

<Field> 有 3 种渲染方式。

除了仅字符串组件，每个渲染道具都传递相同的道具您的方便。

Field 的渲染道具是一个对象，包含：

字段：包含onChange、onBlur、name 和value 的对象字段形式：Formik state and helpers 传递给字段的任何其他道具

在 Formik 文档here 中查看更多信息。

【讨论】：

你是说material-ui的TextField必须在Field里面？我不关注。
@NeNenne 我已经更新了我的答案以详细说明。请解释为什么您粘贴的代码不起作用，您是否遇到任何错误？
这让我更清楚了，谢谢。我发现了问题 - 这是验证模式。如果我注释掉，我可以提交成功。否则我按下提交按钮，没有任何反应。你知道我的验证模式有什么问题吗？
@NeNenne 您可以尝试将ValidationSchema 声明移出render 函数吗？在渲染组件之前将其设为const。还可以尝试从TextField 组件中删除required，因为它已经在您的ValidationSchema 中声明了
嗯，不完全是，我让它成为渲染的一个恒定的外部，但它没有帮助。但是我发现this 发布并重写了代码，我认为这种方法更适合我的用例。