By creating an observable object to observe the model operation of the form, the controlled form items are assigned directly through
_..You can complete form control with just a few lines of code. You don't need to care about the controlled logic or the controlled process. You only need to know the controlled results and how to apply your controlled state.
The rendering between each form item is automatically completely isolated, without the need for self organizing component isolation. This will enable faster response time after form input and greatly avoid page lag caused by large dynamic data.
With data observation function, it can perform single or unified observation and monitoring of the entire form or a specific form item in certain scenarios. It can subscribe to values where you need to render with the latest values of form items.
Flexible usage methods, flexible page layout combinations, developers can use certain methods and built-in layouts according to their preferences and scenarios. In most scenarios, developers do not need to manually lay out.
Minimalist API design, in the process of operating forms, simply introducing two APIs can complete most of the work.
Highly scalable form interface for easy customization of forms.
Easy integration with third-party UI.
Complete type inference.
Using NPM
npm install react-form-simple
Using Yarn
yarn add react-form-simple
Create form items using the 'render' function
import{useForm}from'react-form-simple';const{ render }=useForm(fields,[config]);Create form items in component form
import{Form,FormItem}from'react-form-simple';importButtonfrom'@components/Button';importReactfrom'react';import{useForm}from'react-form-simple';exportdefaultfunctionApp(){const{ render, model }=useForm({name: '',age: '',});constrenderName=render('name')(<inputclassName="input"/>);constrenderAge=render('age')(<inputclassName="input"/>);constrenderSubmit=(<ButtononClick={()=>console.log(model)}>submit</Button>);return(<>{renderName}{renderAge}{renderSubmit}</>);}importButtonfrom'@components/Button';importReactfrom'react';import{useForm}from'react-form-simple';exportdefaultfunctionApp(){const{ render, model, useWatch }=useForm({name: ''});constrenderName=render('name')(<inputclassName="input"/>);useWatch(({ model })=>[model.name],(value)=>{/** code */},);return(<>{renderName}{renderAge}</>);}
