background

In a ToB scenario, you need to enter a lot of data, maybe dozens of form fields, and if you write a JSX component to represent each field, the code volume can quickly grow to a thousand or two thousand lines, which is extremely inconvenient to maintain. Therefore, a “form generator” is needed to improve code reuse while also greatly improving productivity. This reference to XRender after writing a simple version of the FormRender component, share how to use and implementation ideas.

Begin to use

Demo address: github.com/hexianzhi/t…

The simplest use of demo:

import { Button, View } from "@tarojs/components"; import React, { useRef, useState } from "react"; import FormRender from ".. /.. /compoments/formRender"; import "./index.scss"; Const formData = [{key: "a", title: "address ", type: "input", required: true, typeProps: {placeholder: placeholder: },}, {key: "c", title: "country ", type: "picker", typeProps: {mode: "selector", range: [" America ", "Chinese", "Brazil", "Japan"],,}}, {key: "b", the title: "note", type: textarea,},]; export default function (props) { const formRef = useRef<any>(); const [formValue, setformValue] = useState({}); const [formSchema, setformSchema] = useState(formData); const onChange = (newValue) => { setformValue(newValue); }; const onSubmit = () => { const isValid = formRef.current.validate(); console.log("isValid: ", isValid); }; return ( <View className="index"> <FormRender ref={formRef} formValue={formValue} formSchema={formSchema} OnChange ={onChange} ></FormRender> <Button onClick={onSubmit}> </Button> </View>); }Copy the code

Effect:

See the complex. TSX file for more uses

Basic idea of use

  1. formSchemaThis parameter is mandatory. This parameter is used to describe form information. Mapping to JSX, that is, describing a form component as JSX is now represented as an object.How to modify:
  • External componentssetState
  • Changes caused by internal components: informSchemaSet the callback that calls the external componentsetState. Such aspickerIn the elementonColumnChange. ifformSchemaIn a separate file, function components can be called by a callback by passing the setState method, just as class components can be called by binding this
  1. formValueAre form values, both of which are controlled by external components.How to modify:
  • OnChange callback

  1. Validation can be done using the validate method, which validates the rules defined in the formSchema

FormSchema specification

For details, see the IFormSchema type definition in the component type.d.ts file. The following is an extended description

  • The Type field determines which component to use for rendering, which must be declared and exported in the Widgets folder.

  • The Required and Rules fields are used for verification purposes. Rules is an array of objects that can write multiple verification rules. Supports pattern regularization and validate function forms, where message is a prompt message.

  • The Title, Diabled, Required, and Hidden fields support booleans as well as functional forms. Additional field support can be added to SupportFunctionItem

  • The Title, Diabled, Required, and Hidden fields are expanded and injected into the custom component as first-level fields. Additional field support can be added in injectCompKeys

  • The typeProps field complements the more detailed properties supported by the component and can be expanded either by itself or using the higher-order component withItemToProps.

  • Render is a function used with type = custom to return JSX for custom components.

  • Extra is used to display more explanatory information under the element

  • Any other fields are passed to the custom component and can be customized as needed

How to extend components

  1. Write the project components first, then inwidgetsImport and inject project components under the foldervalueAnd other information can be exported, relevantpropsTo viewIWidgetPropsinterface
  2. schemaIn thecustomFunction returnsJSXThe element

Resetting styles should be done uniformly in index.scss

Matters needing attention

  • Components useReact.meomoPerform performance optimization, so changeformSchemaNote in the hyperclone object to make changes to the object, if directly changedformSchemaThe object in the function is the same as the pre props and the current props,And you can’t re-render. (You can also remove the react. memo.)

TODO

  • Performance optimization, component independent rendering without interference