amisreact自定义组件定义个表单

要在 AMis React 中定义一个自定义表单组件，你需要实现 `Renderer` 接口，并在其中定义你的表单组件。

以下是一个自定义的表单组件的例子：

import React from 'react';
import { Renderer } from 'amis-react';

interface MyFormProps {
  value?: any;
  onChange?: (value: any) => void;
}

class MyForm extends React.Component<MyFormProps> implements Renderer {
  static defaultProps = {
    value: {
      name: '',
      email: '',
      address: '',
    },
  };

  handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = event.target;
    const { value: formValue, onChange } = this.props;

    if (typeof onChange === 'function') {
      onChange({
        ...formValue,
        [name]: value,
      });
    }
  };

  render() {
    const { value } = this.props;

    return (
      <div>
        <div>
          <label>Name:</label>
          <input type="text" name="name" value={value.name} onChange={this.handleChange} />
        </div>

        <div>
          <label>Email:</label>
          <input type="email" name="email" value={value.email} onChange={this.handleChange} />
        </div>

        <div>
          <label>Address:</label>
          <textarea name="address" value={value.address} onChange={this.handleChange}></textarea>
        </div>
      </div>
    );
  }
}

export default MyForm;

在这个例子中，我们创建了一个 `MyForm` 组件，并实现了 `Renderer` 接口。`MyForm` 组件包含三个表单字段：`name`，`email` 和 `address`。当这些字段中的值发生变化时，我们会调用 `handleChange` 方法来更新组件的状态，并调用传递给组件的 `onChange` 方法来更新表单的值。

要在 AMis React 中使用自定义表单组件，你可以将 `MyForm` 组件作为 `type` 属性的值传递给 `form` 渲染器。例如：

{
  "type": "form",
  "title": "My Form",
  "api": "/api/submit",
  "body": [
    {
      "type": "my-form"
    }
  ],
  "controls": [
    {
      "label": "Submit",
      "type": "submit"
    }
  ],
  "plugins": {
    "form": {
      "controls": {
        "my-form": {
          "type": "my-form"
        }
      }
    }
  }
}

在这个例子中，我们在 `plugins.form.controls` 对象中定义了一个 `my-form` 控件，并将其类型设置为 `my-form`。然后我们在表单的 `body` 属性中使用了 `my-form` 类型的控件。

这样，当 AMis React 渲染这个表单时，它将使用我们定义的 `MyForm` 组件来渲染 `my-form` 类型的控件。