Question

我想在选中全部检查时检查/取消选中所有复选框，但无法使其正常工作。我使用的是材料-ui组件和redux-form。我的计划是使用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;

Answer 1

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

更改（字段：字符串，值：任意）：功能

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

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

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

选中所有复选框redux表单

2 个答案: