开发随笔：利用业务组件zent封装表单组件

zent封装表单组件

• zent版本7.4.3

1. 利用zent的几个组件

• FormControl: 包裹封装组件，用于为封装的表单组件提供label, invalid等参数，与其他封装的表单组件统一格式
• FieldSet: 包裹封装的外部组件，当FormStrategy.View时，为上级托管的Form组件添加字段name
• Form.useField: 初始化一个model，包括初始值，键值key和值value。这个model中值的改变将会注册到上级的Form中
• FieldUtils中的几个方法:
  • useMAppend: 按照顺序从上往下执行回调函数
  • usePipe: 按顺序执行函数，且上一个函数的返回值将作为下一个函数的输出
  • makeChangeHandler: 指定一个需要改变model的值，注意:源码里这个是一个闭包函数，通过上级传入的value直接改传入model中对应的值

2. 结合官网例子分析

import React, {
    useCallback, useState } from "react";
import ReactDOM from "react-dom";

import {
   
  Form,
  Select,
  NumberInput,
  FormStrategy,
  FormControl,
  Button,
  FieldSet,
  Validators,
  FieldUtils
} from "zent";

import "zent/css/index.css";

const {
    SelectTrigger } = Select;
const countyCodeList = [
  {
   
    code: "+86",
    zh: "zhongguo",
    eng: "china",
    value: "中国 +86",
    index: 0
  },
  {
   
    code: "+853",
    zh: "aomen",
    eng: "Macau",
    value: "中国澳门 +853",
    index: 1
  }
];

const filterHandler = (item, keyword) => {
   
  return (
    keyword &&
    item.text