【Formily】Uso de componentes personalizados

• Encapsular selectcomponentes personalizados:
• 一定要在 props 中绑定 value 和 onChange，不然表单提交的时候获取不到值

import React, {
    
     useState, } from 'react';
import {
    
      Select } from 'antd';
import {
    
     HomeOutlined } from '@ant-design/icons';

// formily 内部会自动传递 value和 onChange
export default function ({
    
    value = [], onChange}) {
    
    
  const [tableOptions, setTableOptions] = useState<any>([]);
  // value 绑定 formily
  const [tableValues, setTableValue] = useState<any>(value);
  const handleChange = (values: any, options) => {
    
    
    console.log(`参数: `, values, options);
    setTableOptions(
      [
        ...options,
        {
    
    
          label: (
            <span>
              <HomeOutlined />
              {
    
    values.at(-1)}
            </span>
          ),
          value: values.at(-1),
        },
      ].filter((item) => item?.value),
    );
    setTableValue(values);
    // onChange 绑定 formily
    onChange(values)
  };
  return (
      <Select
        mode="tags"
        style={
    
    {
    
     width: '100%' }}
        placeholder="多个名称用英文逗号(,)连接"
        onChange={
    
    handleChange}
        options={
    
    tableOptions}
        value={
    
    tableValues}
        tokenSeparators={
    
    [',']}
      />
  );
}

• Usar componentes personalizados

import React, {
    
     useMemo } from 'react';
import {
    
     FormItem } from '@formily/antd';
import TableSelect from './TableSelect'

export default function(){
    
    
  const form = useMemo(()=>createForm(),[])
  return (
    <FormProvider form={
    
    form}>
      <Field
        name={
    
    ['name']}
        title="名称"
        decorator={
    
    [FormItem]}
        component={
    
    [TableSelect]}
      />;
    </FormProvider>
  )
}