回调中的 Formik 无线电值不是最新的

Question

我使用 formik 构建了一个带有两个单选按钮的表单：

const RadioButton = ({
  field: { name, value, onChange, onBlur },
  id,
  label,
  className,
  onSelect,
  ...props
}) => {
  return (
    <div>
      <input
        name={name}
        id={id}
        type="radio"
        value={id}
        checked={id === value}
        onChange={onChange}
        onClick={onSelect}
        onBlur={onBlur}
        {...props}
      />
      <label htmlFor={id}>{label}</label>
    </div>
  );
};

const App = () => (
  <div className="app">
    <Formik
      initialValues={{
        radioGroup: ""
      }}
      render={({ values }) => (
        <form>
          <Field
            component={RadioButton}
            name="radioGroup"
            id="radioOption1"
            onSelect={() => console.log(values)}
            label="Option 1"
          />
          <Field
            component={RadioButton}
            name="radioGroup"
            id="radioOption2"
            onSelect={() => console.log(values)}
            label="Option 2"
          />
          <p>{JSON.stringify(values)}</p>
        </form>
      )}
    />
  </div>
);

我的目标是在选择单选元素时得到通知。所以我将 onSelect 回调传递给 RadioButton 组件并将其添加到输入字段的 onClick 处理程序：onClick={onSelect}.

通知有效。然而在

onSelect={() => console.log(values)}

values 不包含所选的单选按钮。够奇怪的，

<p>{JSON.stringify(values)}</p>

显示所选值，如您在此处所见：

亲自尝试一下：

https://codesandbox.io/s/formik-radio-and-checkbox-inputs-vguym

知道为什么会这样吗？

Answer 1

您正在使用 onSelect，当您点击一个元素（重新渲染之前）时就会发生这种情况。它向您显示 values 当时的状态，恰好是您的 initialValues 对象。一旦它重新渲染，即表单因为 formik prop 由于事件而改变，即选择单选按钮的状态 radioGroup 值发生变化，它会强制重新渲染，因此您会在屏幕上的输出中看到正确的值。如果你把 console.log 放在它外面，就在你的表单标签下面，它会在重新渲染时显示更新后的状态

这是更新的片段，以反映点击事件发生时和之后发生的事情

https://codesandbox.io/s/formik-radio-and-checkbox-inputs-mgps7

它还显示了我在代码库中针对各种情况最常使用的用法信息。

回调中的 Formik 无线电值不是最新的

Formik radio values not freshest from within a callback

reactjs

formik