React Bootstrap Form.Check with Formik答案

【问题标题】：React Bootstrap Form.Check with FormikReact Bootstrap Form.Check with Formik
【发布时间】：2021-02-14 08:57:07
【问题描述】：

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

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

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

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

【问题讨论】：

标签： reactjs typescript react-bootstrap formik

【解决方案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>
);

【讨论】：