Form development mode

Mastered value/onChange, You have mastered the essence of form writing .

Management side components , There are only two purposes ：

1. Collect data from users
2. Showing data to users

Collect data from users , There are three data formats ：

1. The value of the original data type （ such as string/number etc. ）
2. object
3. Array

therefore , The development model for collecting any data from users is ：

1. Three input fields , An interface ：value/onChange.
   1. Input fields for collecting raw data types （ Most of the antd Provide ）
   2. Input box for collecting objects
   3. Collect the input box of the array
2. form Is to distribute objects to the next level input Convenience tools for ;form It is an output object to the upper level input.
3. Collect nested object form development , Is to descend step by step , Development can collect information about each object input. This is a recursive process , And can be automated .

Example

Collect non nested objects

Collect the following objects ：

{
  "name": " Reward rule name ",
  "desc": " Description of reward rules "
}

Direct use antd form, Distributed to... That collects raw values input that will do ：

Form:
  Input: name
  Input: desc

Collect nested objects

Collect the following objects ：

{
  "name": " Reward rule name ",
  "desc": " Description of reward rules "
  "msg": {
    "template_id": "323ll1w",
    "app_id": "app12323"
  }
}

use antd form, Distribute to msg when ：

Form:
  Input: name
  Input: desc
   An input field that can collect objects : msg

We need an input field that can collect objects , And its interface conforms to value/onChange.

Review the second article of the development model ：

form Is to distribute objects to the next level input Convenience tools for ;form It is an output object to the upper level input.

form It is a component that can output objects , Just change its interface to value/onChange that will do .

Can collect msg Object's input box component ：

import { Form, Input } from 'antd'
import React, { FC } from 'react'

export const MsgInput: FC<{
  value?: any,
  onChange?: (value: string) => void
}> = (props) => {
  const { value, onChange = (() => { }) } = props
  const [form] = Form.useForm()
  const fields = [{
    label: ' Templates  ID',
    key: 'template_id',
    jsx: <Input />,
   
  }, {
    label: 'APPID',
    key: 'app_id',
    jsx: <Input />,
  }]
  const getFields = (fields) => {
    const children = fields.map(one => (
      <Form.Item
        name={one.key}
        label={one.label}
        rules={one.rules}
      >
        {one.jsx ? one.jsx : <Input />}
      </Form.Item>
    ))

    return children
  }

  return (
    <Form
      form={form}
      initialValues={value}
      name='object_input'
      onValuesChange={(_, values) => {
        onChange(values)
      }}
    >
      {getFields(fields)}
    </Form>
  )
}

And this 【 Can collect msg Object input field 】, From becoming 【 Collect input boxes for any object 】 It's not far away , such as ：

export const CreateObjectInput = (fields) => {
   return (props) => {
      const { value, onChange = (() => { }) } = props
      const [form] = Form.useForm()
      const getFields = (fields) => {
        const children = fields.map(one => (
          <Form.Item
            name={one.key}
            label={one.label}
            rules={one.rules}
          >
            {one.jsx ? one.jsx : <Input />}
          </Form.Item>
        ))

        return children
      }

      return (
        <Form
          form={form}
          initialValues={value}
          name='object_input'
          onValuesChange={(_, values) => {
            onChange(values)
          }}
        >
          {getFields(fields)}
        </Form>
      )
  }
}

Collect nested array objects

such as ：

{
  "name": " Reward rule name ",
  "desc": " Description of reward rules "
  "msg": {
    "template_id": "323ll1w",
    "app_id": "app12323"
  },
  "msgs": [
    {
      "template_id": "323ll1w",
      "app_id": "app12323"
    },
    {
      "template_id": "323ll1w",
      "app_id": "app12323"
    },
  ]
}

use antd form, Distribute to msgs when ：

Form:
  Input: name
  Input: desc
  MsgInput: msg
   An input field that can collect arrays : msgs

Can collect msgs The input field component of the array ：

import { Form } from 'antd'
import React, { FC } from 'react'
export const MsgsInput: FC<{
  value?: any,
  onChange?: (value: any) => void
}> = (props) => {
  const { value, onChange = (() => { }) } = props
  const add = () => {
    onChange([...value, {}])
  }
  const del = () => {
    const newVal = [...value]
    newVal.pop()
    onChange(newVal)
  }
  if (!value) {
    //  If it is empty , Inform the outside first , Change to an empty array , Render at least one table 
    onChange([])
    return <Button type='primary' onClick={add}>
       newly added 
    </Button>
  }

  const onOneInputChange = (v, i) => {
    const copy = [...value]
    copy[i] = v
    onChange(copy)
  }

  return (
    <>
      {value.map((one, index) => <MsgInput key={index} value={one} onChange={(value) => onOneInputChange(value, index)} />)}
      <Button type='primary' onClick={add}>
         newly added 
      </Button>
      {(value?.length > 1) ? <Button type='default' onClick={del}>
         Delete 
      </Button> : ''}
    </>
  )
}

And this 【 Can collect msgs The input field of the array 】, From becoming 【 Collect input fields for any array 】 It's not far away , such as ：

export const CreateArrayInput = (OneInput) => {
  return (props) => {
    const { value, onChange = (() => { }) } = props
    const add = () => {
      onChange([...value, {}])
    }
    const del = () => {
      const newVal = [...value]
      newVal.pop()
      onChange(newVal)
    }
    if (!value) {
      //  If it is empty , Inform the outside first , Change to an empty array , Render at least one table 
      onChange([])
      return <Button type='primary' onClick={add}>
         newly added 
      </Button>
    }

    const onOneInputChange = (v, i) => {
      const copy = [...value]
      copy[i] = v
      onChange(copy)
    }

    return (
      <>
        {value.map((one, index) => <OneInput key={index} value={one} onChange={(value) => onOneInputChange(value, index)} />)}
        <Button type='primary' onClick={add}>
           newly added 
        </Button>
        {(value?.length > 1) ? <Button type='default' onClick={del}>
           Delete 
        </Button> : ''}
      </>
    )
  }
}

follow-up

If all three input fields can be generalized , And the pattern is fixed , that , Given a data to be collected , Can you automate the output of forms ？

I'll break it down next time .

expand ： Sharing and reuse mechanism

The key to reuse is ： classification .

1. Put your own needs , Fall into a category ,
2. Then according to this category , Find the components that meet the requirements .

therefore , The essence of classification is ： A technology for fast location solutions .

When providing a set of components , The most important thing is to establish a set of classification standards ：

1. Each category has a clear boundary , Mutual exclusion does not overlap
2. Concise and limited classification steps , Be able to perform a quick classification of a requirement .

The greatest significance of this development model lies in ：

The classification criteria for the data to be collected as components are established —— Clear and direct .

Clear to , Have the possibility of program execution classification and matching ：

Enter a data , By inferring the type , Automatic matching can output corresponding types of components .