Reactjs 福米克赢了'；重新渲染

我正在使用Formik library，有一个简单的表单，其中有一个复选框，我希望在更改时提交：

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

{
validateForm（）。然后（\u errors=>{
console.log（值）；
});
}}
>
{（{values，handleChange，handleSubmit}）=>(
切换
)}

出于某种原因，似乎每次单击后都不会重新渲染输入，而只是在每秒钟单击后。因此，复选框未被更新-您必须单击两次才能更改它（onChange事件仅每秒触发一次）

我可以通过添加

键

强制它重新渲染，但这是一种黑客行为

---

这里是沙箱：

您的问题是每次更改时都试图提交表单

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

从“lodash”导入 或者，如果不使用lodash，可以将handleSubmit异步调用包装为setTimeout，如下所示：

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

setTimeout（handleSubmit，0）}>

谢谢您的回答，但我认为这不会有什么帮助-

表单

在Formiks render props函数中，因此这种去抖动会有效地延迟提交的执行。您可以在这里看到，只要单击复选框，它就会多次提交表单：我可以将debounce移动到submit上的

onSubmit

处理程序，但当单击复选框时，我会遇到一个可怕的延迟-这不是您要做的事情我不确定我是否了解您的问题。。。您以前也尝试过以相同的方式提交，但取消Bouncing解决了您的更新问题。如果您不想在复选框每次更改时提交，那么您不应该在

表单中将
handleSubmit
添加到
onChange
中，我希望每次更改都在提交时触发-我的想法是在handleSubmit函数中消除影响，这样我就不会真正在每次更改时提交。如果我理解你的建议，我应该在表单更改时使用debounce来解决更新问题，但是我需要在handleSubmit函数中使用另一个来防止每次更改时提交？这是令人困惑的，请注意，这只是一个复选框问题-如果我添加文本输入，它可以很好地与一个输入配合使用，如果你不去抖动，你也可以在每个按键上调用handleSubmit。我发现了去盎司的问题。每次组件重新加载时，函数引用都会丢失，这就是它不能正常工作的原因。我现在使用React.useRef（）保留引用。你可以在这里看到：
<form onChange={() => setTimeout(handleSubmit, 0)}>