Formik 和 Semanic UI 反应。延迟打字，不必要的验证

Question

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

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

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

Answer 1

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

Answer 2

如果您只想在提交时验证您的字段，并且由于您使用的是 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>

以此将您的输入值设置为状态handleChange = (e, { name, value }) => this.setState({ [name]: value })

并且您可以使用此功能来处理您的数据验证

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

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

Formik 和 Semanic UI 反应。延迟打字，不必要的验证

Formik and Semanic UI React. Delay on typing, unnecessary validation

reactjs

semantic-ui-react

formik