Formik 复选框不会重新渲染

Question

我正在使用 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 来强制它重新渲染，但这是一个 hack。

这里是沙盒：https://codesandbox.io/s/formik-checkbox-issue-ew65e

Answer 1

您的问题是您尝试在每次更改时提交表单。

理想情况下，您应该消除这种行为（也许使用 lodash ？）：

import _ from 'lodash'

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

或者，如果您不使用 lodash，您可以通过将其包装在 setTimeout 中来异步调用 handleSubmit，如下所示：

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