Select 所有复选框未按预期运行

Question

我正在尝试为我的主要 Formik React 表单编写这个自定义 React 组件。

我想创建一个 'select All' 复选框，当 selected 或未 selected 时，selects 或 deselects 所有其他复选框。

我知道我正在使用 onChange 事件单击 'Select All' 复选框。

但是当我这样做时，它总是保持 selected。

我也不确定如何自动 select 和 deselect 其他复选框。

另一件事是，此组件不使用状态，因为状态由我的表单页面中的 Formik 处理。 Formik 只是查找选中了哪个复选框并将其添加到状态。

有办法吗？

谢谢！

这是我的代码：

const EngineList = () => {

    const handleEngineChange = (e) => {
        console.log('set engines to All -- ', e);
    } 

    return (
        <>

            <label>
                <Field type="checkbox" name="engines" onChange={handleEngineChange} value="1" selected />
                Select All
            </label>
            <label>
                <Field type="checkbox" name="engines" value="2" />
                Formula One
            </label>
            <label>
                <Field type="checkbox" name="engines" value="3" />
                Nascar
            </label>
        </>
    );  
}

export default EngineList;

Answer 1

由于 Formik 处理状态，您必须使用 API 来更改状态。有setFieldValue，你可以用

Select 所有复选框未按预期运行

Select All checkbox not behaving as expected

javascript

ecmascript-6

reactjs

formik