Formik 和语义 UI 反应。打字延迟，不必要的验证答案

【问题标题】：Formik and Semanic UI React. Delay on typing, unnecessary validationFormik 和语义 UI 反应。打字延迟，不必要的验证
【发布时间】：2025-11-30 12:35:01
【问题描述】：

这是我的动态表单的一个简单示例。

<Form.Group widths='equal'>
                    <Form.Input onChange={props.handleChange} fluid name={`${type}.${participant.number}.firstName`}
                                label={FIRST_NAME}
                                placeholder={FIRST_NAME_MODEL_DESCR}/>
                    <Form.Input onChange={props.handleChange} fluid label={LAST_NAME}
                                name={`${type}.${participant.number}.lastName`}
                                placeholder={LAST_NAME_MODEL_DESCR}/>
       </Form.Group>

在 Fromik 本身我有简单的 console.log

    validate={values => {
        console.log(values);
    }}

因此，每次我在字段中输入时，每次按键时，我都会从验证中获取日志结果（我不想要），并且每次按下按键时都会有微延迟。

【问题讨论】：

好吧，你在输入字段中放入了 onChange 函数。这就是它发生的原因。你想达到什么目标？
我还能如何获取输入字段的值？这个“handleChange”是一个 Formik 函数。我希望仅在提交时验证我的所有值。

标签： reactjs semantic-ui-react formik

【解决方案1】：

将值为 false 的 validateOnChange（以及 validateOnBlur，如果您也想禁用它）传递给 Formik 组件 (https://jaredpalmer.com/formik/docs/api/formik#validateonchange-boolean)

【讨论】：

当我在字段中输入时，整个表单仍在重新呈现。对于更改，我正在使用 handleChange。
是的，它确实如此，因为 Formik 拥有表单的状态，而表单的其余部分是子组件，并且当父组件重新渲染时，所有子组件也是如此，除非 shouldComponentUpdate 在某处返回 false在组件树中。因此，如果您需要防止部分表单重新呈现（通常没有必要，除非您有更大的表单），请将您的表单字段拆分为单独的组件并使用 PureComponent 来防止其 props 不会更改的组件重新渲染-渲染。
嗨@TLadd，你能告诉我或展示一个如何做到这一点的例子吗？由于使用<Formik> -> <Form> -> <Field> 重新渲染，我遇到了同样的缓慢问题
@GuilhermeMoretto Formik 文档详细介绍了如何使用 FastField formik.org/docs/api/fastfield 处理性能问题。我会读一读。

【解决方案2】：

如果您只想在提交时验证您的字段，并且由于您使用的是 Semantic-UI-React 的 Form 组件，我建议您使用 Semantic 提供的 onSubmit 处理函数。

<Form onSubmit={this.handleSubmit}>
  <Form.Group>
    <Form.Input placeholder='Name' name='name' value={name} onChange={this.handleChange} />
    <Form.Input
      placeholder='Email'
      name='email'
      value={email}
      onChange={this.handleChange}
    />
    <Form.Button content='Submit' />
  </Form.Group>
</Form>

用这个将你的输入值设置为状态handleChange = (e, { name, value }) => this.setState({ [name]: value })

你可以使用这个函数来处理你的数据验证

  handleSubmit = () => {
    const { name, email } = this.state

    // here you can use formic to validate name and email
  }

【讨论】：