扫一扫分享
react Final Form是一个高性能的基于订阅的表单状态管理工具,用于Final Form的精简React包装器,是使用Observer模式的基于订阅的表单状态管理库。当表单状态更改时,React Final Form能重新渲染仅需要更新的组件。
npm i final-form react-final-form
Yarn
yarn add final-form react-final-form
当表单状态更改时,React Final Form 能重新渲染仅需要更新的组件:
引入
import { Form, Field } from 'react-final-form'
使用
const MyForm = () => (
<Form
onSubmit={onSubmit}
validate={validate}
render={({ handleSubmit }) => (
<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">Submit</button>
</form>
)}
/>
)
手机预览