Formik 和 Semanic UI React.打字延迟，不必要的验证

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 本身中，我有简单的控制台.log

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

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

Answer 1

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