javascript - In Redux Form, how can I set the initial value of the checked property of a checkbox? - Stack Overflow

admin管理员组

文章数量:1305973

In our Redux Form 5.3 (not 6.x) app, I want to render an <input type="checkbox" /> like so:

// In some cases, fieldHelper.checked is initially undefined. Then, when the
// user clicks one of the checkboxes, fieldHelper.checked is
// explicitly set to true or false. This change from one of the ponent's
// props being undefined to having a value causes a React warning; see
//  and
// .html#controlled-ponents
// So to prevent that warning, we do a quick null check on
// fieldHelper.checked and replace it with false explicitly if it is
// undefined before rendering the checkbox.
const fieldHelper = this.props.field['checkbox'];
const checked = fieldHelper.checked || false;

const modifiedFieldHelper = Object.assign({}, fieldHelper);
delete modifiedFieldHelper.checked;

return (
  <input
    checked={checked}
    {...modifiedFieldHelper}
  />
);

}

As noted in the ment, in my testing environment, this.props.field['checkbox'].checked is undefined immediately after mounting the <input>. As a result, when my tests modify the value of this.props.field['checkbox'].checked, I get the following warning:

Warning: ApplicantForm is changing an uncontrolled input of type checkbox to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the ponent.

... Unless I explicitly set the checked prop on the <input> to false instead of undefined, as demonstrated in the code snippet I posted above.

Instead of using this null check, I would like to set the initial value of this.props.fields['checkbox'].checked before my tests run. I know I can set the initial value of fields in Redux Form. Is there a way to set the initial value of an auxiliary property like the checked property that Redux Form also controls?

In our Redux Form 5.3 (not 6.x) app, I want to render an <input type="checkbox" /> like so:

// In some cases, fieldHelper.checked is initially undefined. Then, when the
// user clicks one of the checkboxes, fieldHelper.checked is
// explicitly set to true or false. This change from one of the ponent's
// props being undefined to having a value causes a React warning; see
// http://stackoverflow./a/38015169/473792 and
// https://facebook.github.io/react/docs/forms.html#controlled-ponents
// So to prevent that warning, we do a quick null check on
// fieldHelper.checked and replace it with false explicitly if it is
// undefined before rendering the checkbox.
const fieldHelper = this.props.field['checkbox'];
const checked = fieldHelper.checked || false;

const modifiedFieldHelper = Object.assign({}, fieldHelper);
delete modifiedFieldHelper.checked;

return (
  <input
    checked={checked}
    {...modifiedFieldHelper}
  />
);

}

As noted in the ment, in my testing environment, this.props.field['checkbox'].checked is undefined immediately after mounting the <input>. As a result, when my tests modify the value of this.props.field['checkbox'].checked, I get the following warning:

Warning: ApplicantForm is changing an uncontrolled input of type checkbox to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the ponent.

... Unless I explicitly set the checked prop on the <input> to false instead of undefined, as demonstrated in the code snippet I posted above.

Instead of using this null check, I would like to set the initial value of this.props.fields['checkbox'].checked before my tests run. I know I can set the initial value of fields in Redux Form. Is there a way to set the initial value of an auxiliary property like the checked property that Redux Form also controls?

• javascript
• reactjs
• redux
• redux-form

Share Improve this question Follow edited Jan 6, 2017 at 17:39 Kevin asked Jan 3, 2017 at 20:45 KevinKevin 16k2525 gold badges8080 silver badges128128 bronze badges 2

• Have you tried using a boolean? – gustavohenke Commented Jan 3, 2017 at 21:36
• It looks like Redux-Form currently has some bugs with how it works with checkboxes, so I may have run up against that: github./erikras/redux-form/issues/334 – Kevin Commented Jan 6, 2017 at 17:37

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

You could create a simple conditional in your checked attribute so that when the value is undefined you just return false:

<input 
  type="checkbox" 
  checked={typeof this.props.fields['checkbox'].checked == 'undefined'?false:this.props.fields['checkbox'].checked} 
  onClick={() => {... your onClick code ...}} />

Checkboxes are no different from text inputs. You can still just destructure the field object into your <input>. See how the employed value is used in the v5.3.3 Simple Form Example.

<input type="checkbox" {...myField}/>

Redux Form will detect that it's a checkbox (really it detects for boolean values) and use the checked prop.

I've never used Redux-Form but to display the default checked value for a checkbox in default React you'll need to use the defaultChecked attribute. It accepts a boolean.

<input type="checkbox" defaultChecked={/*bool*/} />

本文标签：