选择所有复选框 redux 表单答案

【问题标题】：Select all checkbox redux form选择所有复选框 redux 表单
【发布时间】：2016-11-06 00:16:26
【问题描述】：

我想在选择“全选”但无法使其工作时选中/取消选中所有复选框。我正在使用 material-ui 组件和 redux-form。我的计划是使用 formValueSelector API 获取 checkAll 字段值，并基于此设置复选框 A 和 B 值。也尝试使用 value prop，但仍然没有运气。

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;

【问题讨论】：

标签： material-ui redux-form

【解决方案1】：

您可以使用change 方法。 From docs:

change(field:String, value:any)：函数

更改 Redux 存储中字段的值。这是一个绑定的动作创建者，所以它什么也不返回。

我看到的唯一解决方案是遍历复选框列表并在它们上调用change(checkboxName, value)。

【讨论】：

【解决方案2】：

@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
}

【讨论】：