用 Formik 反应 Bootstrap Form.Check

Question

如何使用 yup 和 Formik 将 Form.Check 正确绑定到布尔变量？

React-Bootstrap 4.5 提供了 example 使用 Formik + yup 和表单输入。我能够设置文本输入和选择，但遇到了 Form.Check 元素的问题。我希望它在更改时提供简单的布尔值，但当复选框被选中时，我得到一个空数组 [] 或 ["on"]。

文档也有这个问题，在上面的 link 例子中显示这个错误信息：

terms must be a boolean type, but the final value was: ["on"].

我的代码：

const schema = yup.object({
    deactivated: yup.boolean(),
});

const initialValues = {
    deactivated: false,
};

return (
    <Formik
        validationSchema={schema}
        onSubmit={(
            values
        ) => {
            save(
                values.deactivated,
            );
        }}
        initialValues={initialValues}>
        {({
            handleSubmit,
            handleChange,
            values,
            errors,
        }) => (
            <Form noValidate onSubmit={handleSubmit}>
                <Form.Group controlId="deactivated">
                    <Form.Check
                        label="Deactivated"
                        type="checkbox"
                        value={values.deactivated}
                        onChange={handleChange}
                        isInvalid={!!errors.deactivated}
                    />
                </Form.Group>
                <Button type="submit">Save</Button>
            </Form>
        )}
    </Formik>
);

Answer 1

我能够使用 setFieldValue 方法手动处理复选框更改：

从 Formik

setFieldValue

将复选框绑定到 checked 属性而不是 value
使用自定义 onChange 处理程序：{e => setFieldValue('deactivated', e.target.checked)}

代码：

return (
    <Formik
        validationSchema={schema}
        onSubmit={(
            values
        ) => {
            save(
                values.deactivated,
            );
        }}
        initialValues={initialValues}>
        {({
            handleSubmit,
            handleChange,
            values,
            errors,
            setFieldValue,
        }) => (
            <Form noValidate onSubmit={handleSubmit}>
                <Form.Group controlId="deactivated">
                    <Form.Check
                        label="Deactivated"
                        type="checkbox"
                        checked={values.deactivated}
                        onChange={e => setFieldValue('deactivated', e.target.checked)}
                        isInvalid={!!errors.deactivated}
                    />
                </Form.Group>
                <<Button type="submit">Save</Button>
            </Form>
        )}
    </Formik>
);

用 Formik 反应 Bootstrap Form.Check

React Bootstrap Form.Check with Formik

typescript

reactjs

react-bootstrap

formik