React Bootstrap Form.Check with Formik [英] React Bootstrap Form.Check with Formik

问题描述

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

React-Bootstrap 4.5 提供了一个

我的代码:

const schema = yup.object({停用:yup.boolean(),});常量初始值 = {停用:假，};返回 (<福米克验证架构={架构}onSubmit={(价值观) =>{保存(values.deactivated,);}}初始值={初始值}>{({处理提交，处理更改，价值观，错误，}) =>(<Form noValidate onSubmit={handleSubmit}><Form.Group controlId="deactivated"><表格检查标签=已停用"类型=复选框"值={values.deactivated}onChange={handleChange}isInvalid={!!errors.deactivated}/></Form.Group><按钮类型=提交">保存</按钮></表格>)}</Formik>);

解决方案

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

• 从 Formik 中提取 setFieldValue 方法
• 将复选框绑定到 checked 属性而不是 value
• 使用自定义 onChange 处理程序:{e =>setFieldValue('deactivated', e.target.checked)}

代码:

返回 (<福米克验证架构={架构}onSubmit={(价值观) =>{保存(values.deactivated,);}}初始值={初始值}>{({处理提交，处理更改，价值观，错误，设置字段值，}) =>(<Form noValidate onSubmit={handleSubmit}><Form.Group controlId="deactivated"><表格检查标签=已停用"类型=复选框"选中={values.deactivated}onChange={e =>setFieldValue('deactivated', e.target.checked)}isInvalid={!!errors.deactivated}/></Form.Group><<Button type="submit">Save</Button></表格>)}</Formik>);

How can I properly bind Form.Check to a boolean variable using yup and Formik?

React-Bootstrap 4.5 provides an example of using Formik + yup with form inputs. I was able to setup text inputs and selects, but encountered a problem with Form.Check element. I expect it to provide simple boolean value on change, but instead I'm getting an empty array [] or ["on"] when checkbox is checked.

The documentation also has this issue, in the example from the link above form displays this error message:

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

My code:

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

解决方案

I was able to handle checkbox changes manually using setFieldValue method:

• extract setFieldValue method from Formik
• bind checkbox to checked property instead of value
• use custom onChange handler: {e => setFieldValue('deactivated', e.target.checked)}

Code:

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

这篇关于React Bootstrap Form.Check with Formik的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！