如何使用useFormik默认选中复选框？

Question

我有这些组件，并且子组件中有 12 个复选框。我想在组件加载时默认检查它们。我不能那样做。我无法使用

checked='true'

作为我的输入的属性，因为 formik 正在控制我的输入并且它不能很好地工作。或者我在检查数组中使用一些预定义值设置检查属性，但它再次效果不佳。我想我可能可以在这里使用 useRef 来触发输入的

onChange

事件，通过检查来模拟更改复选框。像这样的：

const ref = useRef();

useEffect(() => {
ref.current.change();
}, [])

并设置输入的引用。但这没有用。我如何用 ref 或其他东西解决这个问题？

    import {useFormik} from "formik";
    import CheckboxesComponent from "./CheckboxesComponent";
    
    const AddUserForm = ({handleShowForm, showForm, formTitle}) => {
        const cities = options.slice(1)
        const [textAreaString, setTextArea] = useState('')
    
        const formik = useFormik({
            initialValues: {
                tel: '', name: '', password: '', username: '', province: '', level: '', availableCities: '', city: '',
                checked: []
            },
            onSubmit: values => {
                console.log(formik.values)
            }
        })
    
        return(
            <form className='add-user-form' onSubmit={formik.handleSubmit}>
                <div className='form-flex'>
                   {/*other parts of form*/}
                </div>
                <CheckboxesComponent handleChange={formik.handleChange} />
            </form>
        )
    }
    export default AddUserForm

复选框组件：

const fields = [
    {name: 'delNomad', label: 'حذف عشایر'},
    {name: 'editNomad', label: 'ویرایش عشایر'},
    {name: 'addNomad', label: 'افزودن عشایر'},
    {name: 'delDriver', label: 'حذف راننده'},
    {name: 'editDriver', label: 'ویرایش راننده'},
    {name: 'addDriver', label: 'افزودن راننده'},
    {name: 'rejectReq', label: 'رد درخواست ها'},
    {name: 'manualDeliver', label: 'تایید تحویل دستی'},
    {name: 'addWaterReq', label: 'افزودن درخواست آب'},
    {name: 'getExcel', label: 'دریافت فایل اکسل'},
    {name: 'seeingReport', label: 'مشاهده گزارش گیری'},
    {name: 'delReq', label: 'حذف درخواست ها'},
];

const CheckboxesComponent = ({handleChange}) => {

    return(
        <div className='checkboxes-part'>
            {fields.map((item, index) => {
                return(
                    <div>
                        <label>{item.label}</label>
                        <input type='checkbox' name='checked' value={item.name} onChange={handleChange} />
                    </div>
                )
            })}
        </div>
    )
}

export default CheckboxesComponent

Answer 1

您必须在输入中添加检查属性，并检查蚁酸的值，如下所示。

const fields = [
    { name: 'delNomad', label: 'حذف عشایر' },
    { name: 'editNomad', label: 'ویرایش عشایر' },
    { name: 'addNomad', label: 'افزودن عشایر' },
    { name: 'delDriver', label: 'حذف راننده' },
    { name: 'editDriver', label: 'ویرایش راننده' },
    { name: 'addDriver', label: 'افزودن راننده' },
    { name: 'rejectReq', label: 'رد درخواست ها' },
    { name: 'manualDeliver', label: 'تایید تحویل دستی' },
    { name: 'addWaterReq', label: 'افزودن درخواست آب' },
    { name: 'getExcel', label: 'دریافت فایل اکسل' },
    { name: 'seeingReport', label: 'مشاهده گزارش گیری' },
    { name: 'delReq', label: 'حذف درخواست ها' },
];

const CheckboxesComponent = ({ handleChange }) => {

    return (
        <div className='checkboxes-part'>
            {
                formik.values.checked.map((ischecked) => (
                    <React.Fragment>
                        {
                            fields.map((item, index) => {
                                return (
                                    <div key={index}>
                                        <label>{item.label}</label>
                                        <input type='checkbox' name='checked' value={item.name} checked={item.name === ischecked} onChange={handleChange} />
                                    </div>
                                )
                            })
                        }
                    </React.Fragment>)
                )
            }
        </div>
    )
}

export default CheckboxesComponent;