Реакция 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

Если вы хотите проверять свои поля только при отправке, и поскольку вы используете компонент формы Semantic-UI-React, я предлагаю использовать функцию-обработчик onSubmit, которую предлагает Semantic.

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

Answer 2

Передайте validateOnChange (и validateOnBlur, если вы тоже хотите это отключить) со значением false для компонента Formik (https://jaredpalmer.com/formik/docs/api/formik#validateonchange-boolean)