Formik 中具有初始值的复选框未切换，需要处理 Checked/defaultChecked

Question

我在 Formik 中有一个复选框，其初始值是在数据库提取后确定的，它填充 values。但是，如果我执行以下操作，那么尽管初始值是正确的，但我无法切换复选框，它始终保持选中状态。

<Form.Control type="checkbox" 
              id="checkCertAgreement" 
              name="certAgreement"
              checked={values.certifyAndReview === 'Y'}
              value="Y"
              onChange={handleChange} 
              onBlur={handleBlur}   
/>

这意味着我不能使用 checked 但必须使用 defaultChecked。但问题是，我的 values 是在初始 useEffect 提取中的 Ajax 提取之后出现的。 defaultChecked 仅适用于 第一次渲染 。当第一次渲染发生时，显然 values 尚未加载并且 values.certifyAndReview === 'Y' 为 false。所以现在我的复选框的初始值不再起作用，尽管我现在可以切换。

<Form.Control type="checkbox" 
              id="checkCertAgreement" 
              name="certAgreement"
              defaultChecked={values.certifyAndReview === 'Y'}
              value="Y"
              onChange={handleChange} 
              onBlur={handleBlur}   
/>

有什么解决办法吗？ 注意：出于某种原因，此问题不会发生在单选按钮上。 在单选按钮上，当我指定 checked={values.field === 'Y'} 时，它会同时设置初始 post-fetch 值和允许我切换。

Answer 1

我的建议是改用Form.Check。

<Form.Check type="checkbox" 
            id="checkCertAgreement" 
            name="certAgreement"
            checked={values.certifyAndReview === 'Y'}
            onChange={handleChange} 
            onBlur={handleBlur} 
/>

Answer 2

我不得不添加一个明确的 checked 如下，

checked={values.field == 'Y' ? true : false}

现在它会选择初始化的选中状态。

Formik 中具有初始值的复选框未切换，需要处理 Checked/defaultChecked

Checkbox with Initial Value in Formik Not Toggling, Need to Handle Checked/defaultChecked

reactjs

react-bootstrap

formik