Field Component

The <Field> component recursively checks its children to see if they can be made into a <Control>. It then maps all of its props over to each created child <Control>.

If it reaches an unknown component, such as a <SpecialComponent>, it will stop recursing and leave the component as-is. In such cases, it is highly recommended to use <Control> over <Field> whenever possible.

Example:

<Field model="user.favoriteColors">
  <select>
    <option value="red">red</option>
    <option value="green">green</option>
    <option value="blue">blue</option>
  </select>
</Field>

The <Field> component takes in the same props as <Control>. For more information, see the documentation on the <Control> component.

Field-specific Prop Types

dynamic={...}

(Boolean): specifies whether the children inside <Field> are dynamic; that is, whether they are subject to change based on outside values.

Default value: true. To optimize for performance, set dynamic={false} for any <Field> that does not have dynamic children.

Examples:

// Does NOT have dynamic children
<Field model="user.favoriteColors" dynamic={false}>
  <select>
    <option value="red">red</option>
    <option value="green">green</option>
    <option value="blue">blue</option>
  </select>
</Field>

// DOES have dynamic children
<Field model="user.favoriteColors">
  <select>
    {showWhite && <option value="white">white</option>}
    <option value="red">red</option>
    <option value="green">green</option>
    <option value="blue">blue</option>
  </select>
</Field>

// Does NOT have dynamic children
<Field model="user.state" mapProps={...} dynamic={false}>
  <StatePicker />
</Field>

// DOES have dynamic children
const { showTerritories } = this.props;

<Field model="user.state" mapProps={...}>
  <StatePicker territories={showTerritories} />
</Field>

getRef={() => ...}

(Function): Calls the callback provided to the getRef prop with the node instance. Similar to ref.

<Control.text
  model="user.name"
  getRef={(node) => this.attach(node)}
/>