【Formily】自定义组件用法

Formily是一个用于构建表单的React库。要使用自定义组件，你需要创建一个自定义组件，并使用Formily的Field组件和Form组件来管理你的自定义组件的状态。

以下是一个简单的例子，展示如何在Formily中使用自定义组件：

import React from 'react';
import { Form, Field } from '@formily/react';
import { Input, Select } from 'antd'; // 假设你使用的是Ant Design
 
// 自定义组件
const CustomComponent = ({ value, onChange }) => {
  return (
    <Select value={value} onChange={onChange}>
      <Select.Option value="option1">Option 1</Select.Option>
      <Select.Option value="option2">Option 2</Select.Option>
    </Select>
  );
};
 
export default () => {
  return (
    <Form
      onSubmit={values => console.log(values)}
    >
      <Field
        name="customField"
        component={CustomComponent}
      />
      {/* 其他字段可以继续添加 */}
      <button type="submit">Submit</button>
    </Form>
  );
};

在这个例子中，我们创建了一个CustomComponent，它是一个封装了Select组件的自定义组件。在Formily的Field组件中，我们通过component属性将CustomComponent指定为Field的渲染组件。这样，当表单提交时，Formily会自动处理自定义组件的数据。