erikras / react-final-form
- среда, 29 ноября 2017 г. в 03:15:05
🏁 High performance subscription-based form state management for React
npm install --save react-final-form final-form
or
yarn add react-final-form final-form
You can think of it a little like GraphQL's feature of only fetching the data your component needs to render, and nothing else.
Here's what it looks like in your code:
import { Form, Field } from 'react-final-form'
const MyForm = () =>
<Form
onSubmit={onSubmit}
validate={validate}
render={({ handleSubmit, pristine, invalid }) =>
<form onSubmit={handleSubmit}>
<h2>Simple Default Input</h2>
<div>
<label>First Name</label>
<Field name="firstName" component="input" placeholder="First Name"/>
</div>
<h2>An Arbitrary Reusable Input Component</h2>
<div>
<label>Interests</label>
<Field name="interests" component={InterestPicker}/>
</div>
<h2>Render Function</h2>
<Field name="bio" render={({ input, meta }) =>
<div>
<label>Bio</label>
<textarea {...input}/>
{meta.touched && meta.error && <span>{meta.error}</span>}
</div>
}>
<h2>Render Function as Children</h2>
<Field name="phone">
{({ input, meta }) =>
<div>
<label>Phone</label>
<input type="text" {...input} placeholder="Phone"/>
{meta.touched && meta.error && <span>{meta.error}</span>}
</div>
}
</Field>
<button type="submit" disabled={pristine || invalid}>Submit</button>
</form>
}
/>
FieldProps
FieldRenderProps
input.name: string
input.onBlur: (?SyntheticFocusEvent<*>) => void
input.onChange: (SyntheticInputEvent<*> | any) => void
input.onFocus: (?SyntheticFocusEvent<*>) => void
input.value: any
meta.active?: boolean
meta.dirty?: boolean
meta.error?: any
meta.initial?: any
meta.invalid?: boolean
meta.pristine?: boolean
meta.submitError?: any
meta.submitFailed?: boolean
meta.submitSucceeded?: boolean
meta.touched?: boolean
meta.valid?: boolean
meta.visited?: boolean
FormProps
children?: (props: FormRenderProps) => React.Node
component?: React.ComponentType<FormRenderProps>
debug?: (state: FormState, fieldStates: { [string]: FieldState }) => void
initialValues?: Object
onSubmit: (values: Object, callback: ?(errors: ?Object) => void) => ?Object | Promise<?Object>
render?: (props: FormRenderProps) => React.Node
subscription?: FormSubscription
validate?: (values: Object) => void) => Object | Promise<Object>
validateOnBlur?: boolean
FormRenderProps
FormSpyProps
FormSpyRenderProps
Uses the built-in React inputs: input
, select
, and textarea
to build a
form with no validation.
Introduces a whole-record validation function and demonstrates how to display errors next to fields using child render functions.
Introduces field-level validation functions and demonstrates how to display errors next to fields using child render functions.
Demonstrates how field-level validation rules may be asynchronous (return a
Promise
), as well as how to show a "validating" spinner during the lifetime of
the Promise
.
Demonstrates how you can mix synchronous and asynchronous validation patterns at
the record-level, by returning errors synchronously, and falling back to an
asynchronous call (by returning a Promise
) if sync validation is passing.
Demonstrates how to return submission errors from failed submits. Notice that
the Promise
should resolve to the submission error (not reject). Rejection
is reserved for communications or server exceptions.
Demonstrates how easy it is to use third party input components. All the third
party component really needs is value
and onChange
, but more complex
components can accept things like errors.
Demonstrates how, by restricting which parts of form state the form component
needs to render, it reduce the number of times the whole form has to rerender.
Yet, if some part of form state is needed inside of it, the
FormSpy
component can be used to
attain it.
There are three ways to tell <Form/>
and <Field/>
what to render:
Method | How it is rendered |
---|---|
component prop |
return React.createElement(this.props.component, props) |
render prop |
return this.props.render(props) |
a render function as children |
return this.props.children(props) |
The following can be imported from react-final-form
.
Form : React.ComponentType<FormProps>
A component that takes FormProps
and surrounds your entire form.
Field : React.ComponentType<FieldProps>
A component that takes FieldProps
and renders an individual
field.
FormSpy : React.ComponentType<FormSpyProps>
A component that takes FormSpyProps
and can listen to form
state from inside an optimized <Form/>
.
FieldProps
These are props that you pass to
<Field/>
. You must provide one of the
ways to render: component
, render
, or children
.
allowNull?: boolean
By default, if your value is null
, <Field/>
will convert it to ''
, to
ensure
controlled inputs.
But if you pass true
to allowNull
, <Field/>
will give you a null
value.
Defaults to false
.
children?: (props: FieldRenderProps) => React.Node
A render function that is given FieldRenderProps
, as well
as any non-API props passed into the <Field/>
component.
component?: React.ComponentType<FieldRenderProps>
A component that is given FieldRenderProps
as props, as
well as any non-API props passed into the <Field/>
component.
name: string
The name of your field.
render?: (props: FieldRenderProps) => React.Node
A render function that is given FieldRenderProps
, as well
as any non-API props passed into the <Field/>
component.
subscription?: FieldSubscription
A
FieldSubscription
that selects of all the items of
FieldState
that you wish
to update for. If you don't pass a subscription
prop, it defaults to all of
FieldState
.
validate?: (value: ?any, allValues: Object) => ?any
A function that takes the field value, and all the values of the form and
returns an error if the value is invalid, or undefined
if the value is valid.
value?: any
This is only used for radio buttons! The value of the radio button. The
radio button will render as checked
if and only if the value given here ===
the value for the field in the form.
FieldRenderProps
These are the props that <Field/>
provides to your render function or component. This object separates out the
values and event handlers intended to be given to the input component from the
meta
data about the field. The input
can be destructured directly into an
<input/>
like so: <input {...props.input}/>
. Keep in mind that the values
in meta
are dependent on you having subscribed to them with the
subscription
prop
input.name: string
The name of the field.
input.onBlur: (?SyntheticFocusEvent<*>) => void
The onBlur
function can take a SyntheticFocusEvent
like it would if you had
given it directly to an <input/>
component, but you can also just call it:
props.input.onBlur()
to mark the field as blurred (inactive).
input.onChange: (SyntheticInputEvent<*> | any) => void
The onChange
function can take a SyntheticInputEvent
like it would if you
had given it directly to an <input/>
component (in which case it will read the
value out of event.target.value
), but you can also just call it:
props.input.onChange(value)
to update the value of the field.
input.onFocus: (?SyntheticFocusEvent<*>) => void
The onFocus
function can take a SyntheticFocusEvent
like it would if you had
given it directly to an <input/>
component, but you can also just call it:
props.input.onFocus()
to mark the field as focused (active).
input.value: any
The current value of the field.
meta.active?: boolean
See the active
.
meta.dirty?: boolean
See the dirty
.
meta.error?: any
See the error
.
meta.initial?: any
See the initial
.
meta.invalid?: boolean
See the invalid
.
meta.pristine?: boolean
See the pristine
.
meta.submitError?: any
See the submitError
.
meta.submitFailed?: boolean
See the submitFailed
.
meta.submitSucceeded?: boolean
See the submitSucceeded
.
meta.touched?: boolean
See the touched
.
meta.valid?: boolean
See the valid
.
meta.visited?: boolean
See the visited
.
FormProps
These are the props that you pass to
<Form/>
. You must provide one of the
ways to render: component
, render
, or children
.
children?: (props: FormRenderProps) => React.Node
A render function that is given FormRenderProps
, as well
as any non-API props passed into the <Form/>
component.
component?: React.ComponentType<FormRenderProps>
A component that is given FormRenderProps
as props, as
well as any non-API props passed into the <Form/>
component.
debug?: (state: FormState, fieldStates: { [string]: FieldState }) => void
See the debug
.
initialValues?: Object
See the initialValues
.
onSubmit: (values: Object, callback: ?(errors: ?Object) => void) => ?Object | Promise<?Object>
See the onSubmit
.
render?: (props: FormRenderProps) => React.Node
A render function that is given FormRenderProps
, as well
as any non-API props passed into the <Form/>
component.
subscription?: FormSubscription
A
FormSubscription
that selects of all the items of
FormState
that you wish to
update for. If you don't pass a subscription
prop, it defaults to all of
FormState
.
validate?: (values: Object) => void) => Object | Promise<Object>
See the validate
.
validateOnBlur?: boolean
See the validateOnBlur
.
FormRenderProps
These are the props that <Form/>
provides to your render function or component. Keep in mind that the values you
receive here are dependent upon which values of
FormState
you have
subscribed to with the
subscription
prop.
This object contains everything in
FormState
as well as:
batch: (() => void) => void
A function that allows batch updates to be done to the form state.
See the batch
.
blur: (name: string) => void
A function to blur (mark inactive) any field.
change: (name: string, value: any) => void
A function to change the value of any field.
focus: (name: string) => void
A function to focus (mark active) any field.
handleSubmit: (SyntheticEvent<HTMLFormElement>) => void
A function intended for you to give directly to the <form>
tag: <form onSubmit={handleSubmit}/>
.
initialize: (values: Object) => void
A function that initializes the form values.
See the initialize
.
reset: () => void
A function that resets the form values to their last initialized values.
See the reset
.
FormSpyProps
These are the props that you pass to
<FormSpy/>
. You must provide one
of the ways to render: component
, render
, or children
.
children?: (props: FormSpyRenderProps) => React.Node
A render function that is given FormSpyRenderProps
, as
well as any non-API props passed into the <FormSpy/>
component.
component?: React.ComponentType<FormSpyRenderProps>
A component that is given FormSpyRenderProps
as props,
as well as any non-API props passed into the <FormSpy/>
component.
render?: (props: FormSpyRenderProps) => React.Node
A render function that is given FormSpyRenderProps
, as
well as any non-API props passed into the <FormSpy/>
component.
subscription?: FormSubscription
A
FormSubscription
that selects of all the items of
FormState
that you wish to
update for. If you don't pass a subscription
prop, it defaults to all of
FormState
.
FormSpyRenderProps
These are the props that
<FormSpy/>
provides to your render
function or component. These props are of type
FormState
. Keep in mind
that the values you receive here are dependent upon which values of
FormState
you have
subscribed to with the
subscription
prop.