Флажок Formik не будет повторно отображать - PullRequest
Новая
       4

Флажок Formik не будет повторно отображать

0 голосов
/ 24 октября 2019

Я использую библиотеку Formik и у меня есть простая форма с одним флажком, которую я хотел бы отправить при изменении: 

    <Formik
      initialValues={{ toggle: false }}
      validateOnChange={false}
      validateOnBlur={false}
      onSubmit={(values, { validateForm }) => {
        validateForm().then(_errors => {
          console.log(values);
        });
      }}
    >
      {({ values, handleChange, handleSubmit }) => (
        <div>          
          <form onChange={handleSubmit}>
            <label>
              Toggle
              <input
                name="toggle"
                type="checkbox"
                checked={values.toggle}
                onChange={handleChange}
              />
            </label>
          </form>
        </div>
      )}
    </Formik>

По какой-то причине, похоже, что ввод не перерисовывается послекаждый клик, только после каждого второго клика. В результате флажок не обновляется - вы должны дважды щелкнуть для его изменения (событие onChange срабатывает только каждый раз)

Я могу заставить его выполнить повторный рендеринг, добавив key, но это хак.

Вот песочница: https://codesandbox.io/s/formik-checkbox-issue-ew65e

1 Ответ

1 голос
/ 24 октября 2019

Ваша проблема в том, что вы пытаетесь отправить форму при каждом изменении.

В идеале вы должны отрицать это поведение (возможно, с использованием lodash?): 

import _ from 'lodash'

<form onChange={_.debounce(handleSubmit, 300)}>

В качестве альтернативы, если выне используйте lodash, вы можете сделать вызов handleSubmit асинхронным, поместив его в setTimeout, например: 

<form onChange={() => setTimeout(handleSubmit, 0)}>
...