Programatically change Redux-Form Checkbox Field value

Question

I have a register form. When user accept term of services, he clicks on a button which check the checkbox. When he clicks on decline, this button uncheck the checkbox.

I read this answer to programmatically change redux-form values. I am able to change any field except checkbox.

Here are my code:

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();
  }

  // ....

I added this line only to check if email value could be changed:

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

It works !

Step by step, I tried a lot of options to check , but no one has changed checkbox:

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");

In validator, I added some console.error . With manual check or via the accept button, value is true. But Checkbox don't check

edit: My field declaration:

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

Have someone an idea?

score 2 · Accepted Answer · answered Oct 06 '18 at 13:39

2

true/false will only work if you tell redux-form that it's a checkbox. From it's docs:

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.

Make sure you're declaring your Field correctly

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

answered Oct 06 '18 at 13:39

Mrchief

75,126
20
142
189

1

Thanks a lot! I edited your answer because I specified type in my subcomponent. It is not enough, I had to specify it in Field too. – Alexandre Tranchant Oct 06 '18 at 14:34
2

Redux-Form is full of goodies like these. Can’t tell you how much headbanging I went through before I even noticed this. :) – Mrchief Oct 06 '18 at 14:38
I'm migrating a redux application from rc-form to redux-form package because of initialisation problem. I'm pretty sure Redux-form will not save me time, but I hope application will be more stable. Thanks for your help ! – Alexandre Tranchant Oct 06 '18 at 16:09
1

That works. But what about sending in initialValue `i.e` defaultChecked={true}. I expected that to work but its Not – Mbanda Feb 25 '19 at 18:00
1

@Mbanda what you don't realize is "sending an initial value" is a very different problem from setting "defaultChecked" (it sucks but it's the sad reality). The former is pretty easy, the later is tricky and thus harder. It's definitely not enough to cover in a comment and you should post it as a separate question. – Mrchief Feb 25 '19 at 19:33
(https://stackoverflow.com/questions/54872817/react-redux-form-checkbox-defaultchecked-not-working) The link will direct you to the questions – Mbanda Feb 26 '19 at 06:57

Programatically change Redux-Form Checkbox Field value

1 Answers1