Как справиться с реквизитом Formik `handleChange`? - PullRequest
Новая
       5

Как справиться с реквизитом Formik `handleChange`?

0 голосов
/ 26 сентября 2019

Я понял, что Field имеет атрибут onChange, где вы можете передать свою собственную форму Formik onChange отсюда: https://jaredpalmer.com/formik/docs/api/formik#handlechange-e-reactchangeevent-any-void.

Однако я пытаюсь понять, гдеэти value[key] передаются, поэтому я могу обрабатывать данные, передаваемые в форме.Обнаружено в withFormik (): Как использовать handleChange , чтобы я мог передать два обратных вызова в onChange реквизита Formik, но мне интересно, есть ли лучший способ справиться с этим.

редактировать после комментариев от людей, которые ответили, спасибо за это:

Мой код использует эти 2 обратных вызова в пропозиции onChange в Field: 

export default function FormikForm() {
  const onSubmitHandler = (formValues, actions) => {
    console.log(formValues);
    console.log(actions);
  };

  const onChangeHandler = (e) => {
    console.log(e.target.value);
  };

  return (
    <div>
      <h1>This is the Formik Form</h1>
      <Formik
        initialValues={{
          name: "",
          email: "",
          age: ""
        }}
        onSubmit={onSubmitHandler}
        render={props => {
          return (
            <Form>
              <label>
                Name
                <Field
                  name="name"
                  type="text"
                  placeholder="name"
                  onChange={e => {props.handleChange(e); onChangeHandler(e)}}
                />
              </label>
              <button type="submit">Submit</button>
            </Form>
          );
        }}
      />
    </div>
  );
}

Есть ли способ сделать то же самое, что и в onSubmitHandler, где Formik автоматически выводит значение ввода без необходимости вызова этих 2 функций в onChange?

Спасибо

1 Ответ

0 голосов
/ 26 сентября 2019

Каждый компонент поля получает поле prop , которое имеет value prop, содержащее значение для этого поля, а также form prop, содержащее вспомогательные методы, которые можно использовать для установки значения.Мне нужно было бы увидеть структуру вашего кода, чтобы дать конкретные советы о том, как реализовать то, что вы хотите, но вы можете эмулировать функциональность по умолчанию, вызывая form.setFieldValue(field.name, field.value).Кроме того, в field prop этот обработчик встроен по умолчанию в field.onChange prop.

...