Material ui 选中所有复选框重新编辑表单

我想在选择“全部选中”时选中/取消选中所有复选框，但无法使其工作。我正在使用MaterialUI组件和redux表单。我的计划是使用formValueSelector API获取checkAll字段值，并在此基础上设置复选框A和B值。也尝试使用价值道具，但仍然没有运气

import React from 'react';
import { connect } from 'react-redux';
import { Field, reduxForm, formValueSelector } from 'redux-form';
import { Checkbox } from 'redux-form-material-ui';

let Form = (props) => {

return (
    <form>

      <Field name="checkAll" id="checkAll" label="Check All" component={ Checkbox } />

      <Field name="a" label="A" component={ Checkbox } checked={ props.checkAll } />

      <Field name="b" label="B" component={ Checkbox } checked={ props.checkAll } />

    </form>
  );
};

Form = reduxForm({
  form: 'Form'
})(AddReturnModal);

// Decorate with connect to read form values
const selector = formValueSelector('Form'); // <-- same as form name
Form = connect(
 (state) => {
    const checkAll = selector(state, 'checkAll');

    return {
      checkAll
    };
  }
)(Form);

export default Form;

从“React”导入React；
从'react redux'导入{connect}；
从'redux form'导入{Field，reduxForm，formValueSelector}；
从“redux表单材质ui”导入{Checkbox}；
让形式=（道具）=>{
返回(
);
};
Form=reduxForm({
表格：'表格'
})（a）模式；
//使用“连接到读取表单值”装饰
常量选择器=formValueSelector（'Form'）；//{
const checkAll=选择器（状态为“checkAll”）；
返回{
检查所有
};
}
)（表格）；
导出默认表单；

您可以使用

change

方法

更改（字段：字符串，值：任意）：函数

更改Redux存储中字段的值。这是绑定动作创建者，因此不返回任何内容

---

我看到的唯一解决方案是循环检查复选框列表，并对其调用

change（checkboxName，value）

。

@notgiorgi是正确的，要选择所有复选框，您可以执行以下操作：

selectAll = () => {
  const { change } = this.props

  ['a', 'b'].forEach((field) => change(field, true))
}

如果您想要切换，您可以轻松/廉价/无意识地保留对selectAll状态的粗略引用：

selectAllValue = false

selectAll = () => {
  const { change } = this.props

  ['a', 'b'].forEach((field) => change(field, this.selectAllValue))

  // toggle select all to select none
  this.selectAllValue = !this.selectAllValue
}