<Field/>
import { Field } from 'react-final-form'
A component that registers a field with the containing form, subscribes to field state, and injects both field state and callback functions, onBlur, onChange, and onFocus via a render prop.
The <Field/> will rerender any time the field state it is subscribed to changes. By default it subscribes to all field state. You can control which field state it subscribes to with the subscription prop.
Props
<Field/> accepts FieldProps and will call the render function with FieldRenderProps.
The only two required props are name and one of component, render, or children.
Basic Usage
You need to do three things when using <Field/>:
1. Provide a name prop
The name of the field can be a reference to a "deep" value via dot-and-bracket syntax, e.g. 'clients[0].address.street'.
2. Provide a way to render the field
There are four ways to render a <Field/> component:
| Prop | Type |
|---|---|
<Field component/> | 'input' or 'select' or 'textarea' |
<Field component/> | React.ComponentType |
<Field render/> | Function |
<Field children/> | Function |
The only important distinction is that if you pass a component to the component prop, it will be rendered with React.createElement(), resulting in your component actually being in the React node tree, i.e. inspectable in DevTools.
3. Connect the callbacks to your input
If you are using component="input" (or select or textarea), <Field/> will do this step for you.
<Field name="myField" component="input" />
But if you are using a custom component or a render prop, you will need to do this yourself.
<Field/> makes this as easy as possible by bundling all of the props that your input component needs into one object prop, called input, which contains name, onBlur, onChange, onFocus, and value.
HTML Inputs
If you're going to be using one of the standard HTML inputs, <input>, <select>, or <textarea>, it's just a matter of using the spread operator to populate the props of the input.
<Field name="myField">
{props => (
<div>
<input {...props.input} />
</div>
)}
</Field>
Custom Inputs
The only thing a custom input needs to do to be compatible with React Final Form is to accept a value prop and somehow call the onChange callback to change the value.
import TextField from '@material-ui/core/TextField'
...
<Field name="myField">
{props => (
<div>
<TextField
name={props.input.name}
value={props.input.value}
onChange={props.input.onChange}
/>
</div>
)}
</Field>
Note: To use an array for the values (with another field type, like a tags-input component), you can do value={[...props.input.value]} to avoid "Invalid prop type of 'string' warning"
