score:2

on using getfielddecorator api, initialvalue will override the value property on given component.

options.initialvalue - you can specify initial value, type, optional value of children node. (note: because form will test equality with === internally, we recommend to use variable as initialvalue, instead of literal)

but in your case, checkbox doesn't has value property.

instead, you need to use valuepropname and specify the initialvalue property.

options.valuepropname - props of children node, for example, the prop of switch is 'checked'.

therefore initialvalue: "a" has no meaning, it may be true if you used for example select component.

moreover you can use props or state for initial value like initialcheckboxvalue:

class demo extends react.component {
  render() {
    const { getfielddecorator } = this.props.form;

    return (
      <flexbox>
        <form>
          <form.item label="checkbox">
            {getfielddecorator('select', {
              initialvalue: 'b'
            })(
              <select>
                <select.option value="a">a</select.option>
                <select.option value="b">b</select.option>
              </select>
            )}
          </form.item>

          <form.item label="checkbox a">
            {getfielddecorator('checkbox-1', {
              initialvalue: this.props.initialcheckboxvalue,
              valuepropname: 'checked'
            })(<checkbox>a</checkbox>)}
          </form.item>

          <form.item label="checkbox b">
            {getfielddecorator('checkbox-2', {
              initialvalue: true,
              valuepropname: 'checked'
            })(<checkbox>b</checkbox>)}
          </form.item>
        </form>
      </flexbox>
    );
  }
}

const demoform = form.create()(demo);

reactdom.render(
  <demoform initialcheckboxvalue={false} />,
  document.getelementbyid('root')
);

edit q-57113541-forminitialvalue

score:4

the valuepropname: 'checked' is restricted to checkboxes. see below:

<form.item>
   {getfielddecorator('propname', {
      valuepropname: 'checked'
   })(
      <checkbox>checkbox text</checkbox> 
   )}
</form.item>

don't set defaultchecked as this can interfere with the value, because it's set on the checkbox itself.

if the binding doesn't work automatically, use mappropstofields to specify the binding yourself. see a full example below:

const buildingcrud = form.create({
  name: "organisation_form",
  mappropstofields(props) {
    return {
      name: form.createformfield({
        value: props.name,
      }),
      address: form.createformfield({
        value: props.address,
      }),
      numberofapartments: form.createformfield({
        value: props.numberofapartments,
      }),
      postcode: form.createformfield({
        value: props.postcode,
      }),
      parking: form.createformfield({
        value: props.parking,
      }),
      id: form.createformfield({
        value: props.id,
      }),
    };
  },
})((props) => {
  const { getfielddecorator } = props.form;

  return (
    <form style={{ maxwidth: "320px" }} onsubmit={handlesubmit}>
      <form.item label="name">
        {getfielddecorator("name", {
          rules: [{ required: true, message: "building name is required" }],
        })(
          <input
            prefix={
              <icon type="profile" style={{ color: "rgba(0,0,0,.25)" }} />
            }
            placeholder="company name"
          />
        )}
      </form.item>

      <form.item>
        {getfielddecorator("address", {
          rules: [{ required: true, message: "building address is required" }],
        })(
          <input
            prefix={<icon type="mail" style={{ color: "rgba(0,0,0,.25)" }} />}
            placeholder="address"
          />
        )}
      </form.item>

      <form.item>
        {getfielddecorator("postcode", {
          rules: [{ required: true, message: "building postcode is required" }],
        })(
          <input
            prefix={<icon type="mail" style={{ color: "rgba(0,0,0,.25)" }} />}
            placeholder="postcode"
          />
        )}
      </form.item>

      <form.item>
        {getfielddecorator("parking", {
          valuepropname: "checked",
        })(<checkbox>available parking</checkbox>)}
      </form.item>
    </form>
  );
});

export default buildingcrud;

Related Query

More Query from same tag