5

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

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

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

4

2 回答 2

2

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

于 2018-09-22T16:31:31.077 回答
0

如果您只想在提交时验证您的字段，并且由于您使用的是 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
  }
于 2018-09-22T16:34:46.903 回答