Reactjs Formik和语义用户界面相互作用。输入延迟，不必要的验证

下面是我的动态表单的一个简单示例

<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>

---

所以，每当我在字段中键入时，每次按键我都会从验证中获得日志结果（我不希望这样），并且每次按键按下时都有微延迟。

将validateOnChange（如果您想禁用它，也可以将validateOnBlur）的值传递给Formik组件（）

如果您希望仅在提交时验证字段，并且由于您使用的是Semantic UI React的表单组件，我建议使用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>

---

好的，您在change函数中输入了输入字段。这就是它发生的原因。您希望实现什么？否则如何获取输入字段的值？这个“handleChange”是一个Formik函数。我只想在提交时验证我的所有值。当我在字段中键入时，整个表单仍在重新提交。对于更改，我使用handleChange。是的，这是因为Formik保存窗体的状态，窗体的其余部分是子窗体，当父组件重新呈现时，它的所有子组件都会重新呈现，除非shouldComponentUpdate在组件树的某个地方返回false。因此，如果您需要防止部分表单重新呈现（除非您有更大的表单，否则通常不需要），请将表单字段拆分为单独的组件，并使用PureComponent防止其道具不会更改的组件重新呈现。您好@TLadd，您能告诉我或演示一个如何执行此操作的示例吗？由于使用

->

->

->

@guilhermemoreto重新渲染，我也遇到了同样的缓慢问题。Formik文档详细介绍了如何使用FastField处理性能问题。我会看一看。

<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>

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

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