【ProComponents】如何修改ProForm的默认按钮

ProForm 是一个 React 表单库，它提供了一些默认的表单按钮，比如“提交”和“重置”按钮。如果你想修改这些默认按钮，你可以使用 ProForm 的 submitter 和 resetter 属性，这两个属性允许你自定义表单按钮的文本、样式和事件处理程序。

下面是一个示例代码，演示如何修改 ProForm 的默认按钮：

import ProForm, {
  ProFormText,
  ProFormDatePicker,
  ProFormSelect,
  ProFormCheckbox,
  ProFormRadio,
} from '@ant-design/pro-form';

const layout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 8 },
};

const submitterRender = (props, defaultDoms) => {
  return [
    <Button key="submit" type="primary" onClick={() => props.form?.submit()}>
      自定义提交
    </Button>,
  ];
};

const resetterRender = (props, defaultDoms) => {
  return [
    <Button key="reset" onClick={() => props.form?.resetFields()}>
      自定义重置
    </Button>,
  ];
};

export default () => (
  <ProForm
    layout="horizontal"
    onFinish={(values) => {
      console.log(values);
    }}
    submitter={{
      render: submitterRender,
    }}
    resetter={{
      render: resetterRender,
    }}
  >
    <ProFormText name="username" label="用户名" rules={[{ required: true }]} />
    <ProFormDatePicker name="date" label="日期" />
    <ProFormSelect
      name="type"
      label="类型"
      options={[
        { label: '类型1', value: 'type1' },
        { label: '类型2', value: 'type2' },
      ]}
    />
    <ProFormCheckbox.Group
      name="checkbox"
      label="复选框"
      options={[
        { label: '选项1', value: 'option1' },
        { label: '选项2', value: 'option2' },
      ]}
    />
    <ProFormRadio.Group
      name="radio"
      label="单选框"
      options={[
        { label: '选项1', value: 'option1' },
        { label: '选项2', value: 'option2' },
      ]}
    />
  </ProForm>
);

在上面的示例代码中，我们使用了 submitterRender 和 resetterRender 函数来定义自定义的提交和重置按钮。这两个函数的第一个参数是一个包含一些属性的对象，包括表单对象 form、提交按钮的文本 submitText、重置按钮的文本 resetText 等。这些属性可以被用来定制按钮的文本和事件处理程序。

然后，我们将这两个函数作为 submitter 和 resetter 属性的 render 属性的值传递给 ProForm 组件，以便将它们用于渲染表单的提交和重置按钮。

注意，在使用自定义按钮时，你需要自行处理表单的提交和重置逻辑。在上面的示例代码中，我们使用了 props.form?.submit() 和 props.form?.resetFields() 来手动触发