以编程方式更改 Redux-Form 复选框字段值

Question

我有一张登记表。当用户接受服务条款时，他单击一个选中复选框的按钮。当他点击拒绝时，此按钮取消选中复选框。

我读了。我可以更改除复选框以外的任何字段。

这是我的代码：

class RegisterContainer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      modalTOS: false
    };

    this.accept = this.accept.bind(this);
    this.decline = this.decline.bind(this);
    this.toggleTOSModal= this.toggleTOSModal.bind(this);
  }

  accept() {
    this.props.actions.change("register", "email", "foo42bar"); //This is a working test
    this.props.actions.change("register", "read", true);
    this.toggleTOSModal();
  }
  decline() {
    this.props.actions.change("register", "read", false);
    this.toggleTOSModal();
  }

  // ....

我添加这一行只是为了检查电子邮件值是否可以更改：

this.props.actions.change("register", "email", "foo42bar");

有效！

一步一步，我尝试了很多选项来检查，但没有人更改复选框：

this.props.actions.change("register", "read", "on");
this.props.actions.change("register", "read", true);
this.props.actions.change("register", "read", "1");
this.props.actions.change("register", "read", 1);
this.props.actions.change("register", "read", "true");
this.props.actions.change("register", "read", "a");

在验证器中，我添加了一些 console.error 。通过手动检查或通过接受按钮，值为真。但是复选框不勾选

编辑：我的字段声明：

<Field name="read" component={FormCheckBoxGroup} {...fieldProps} onClick={onClickTos} required />

FormCheckBoxGroup:

<FormGroup check>
  <Col sm={{ size: 8, offset: 4 }}>
    <Label check className={className}>
      <Input {...input} type="checkbox" disabled={disabled} required={required} />
      {label}
    </Label>
    {!required && helpBlock && <HelpBlock>{helpBlock}</HelpBlock>}
    {error && <HelpBlockErrors errors={messages} />}
    {children}
  </Col>
</FormGroup>

有人有想法吗？

Answer 1

true/false 仅当您告诉 redux-form 它是一个复选框时才会起作用。来自它的文档：

input.checked : boolean [optional] An alias for value only when value is a boolean. Provided for convenience of destructuring the whole field object into the props of a form element.

确保您 Field 正确申报

<Field name="accpetTerms" component="input" type="checkbox" />

以编程方式更改 Redux-Form 复选框字段值

Programatically change Redux-Form Checkbox Field value

javascript

reactjs

redux-form