关于清空ant.design 中表单内容的方法

最新推荐文章于 2024-02-07 16:10:05 发布

xwhking

最新推荐文章于 2024-02-07 16:10:05 发布

阅读量886

点赞数

文章标签： javascript 前端 react.js

本文链接：https://blog.csdn.net/Go_ahead_forever/article/details/134771334

版权

关于清空ant.design 中表单内容的方法

其实就两个方法具体怎么清除一个一个试试就知道了

表单有两个可能的属性：

form
formRef

可以用他们绑定两个用法在代码部分定义：

form = useRef()
form = Form.useForm()

清空的方法：

form.current?.setFieldsValue({这里把你的值放进来并且赋值空字符串就好})
form.setFieldsValue({这里把你的值放进来并且赋值空字符串就好})

使用实例：

import {
  LockOutlined,
  UserOutlined,
} from '@ant-design/icons';
import {
  LoginFormPage,
  ProConfigProvider,
  ProFormText,
} from '@ant-design/pro-components';
import {Button, Form, message, Tabs, theme} from 'antd';
import { useState } from 'react';
import {userRegisterUsingPost} from "@/services/yuapi/userController";
import { history } from '@umijs/max';


const Page = () => {
  const formRef = Form.useForm()
  const [loginType, setLoginType] = useState('register');
  const { token } = theme.useToken();
  const registerUser = async (values:API.UserRegisterRequest) => {
    const res = await userRegisterUsingPost({
      ...values
    })
    if(res.data){
      message.success("注册成功")
      history.push('/user/login')
    }else{
      message.error(res.message)
      formRef.current?.setFieldsValue({
        userAccount:"",
        userPassword:"",
        checkPassword:""
      })
    }
  }
  return (
    <div
      style={{
        backgroundColor: 'white',
        height: '100vh',
      }}
    >
      <LoginFormPage
        onFinish={registerUser}
        formRef={formRef}
        submitter={{ searchConfig: { submitText: '注册', }}}
        backgroundImageUrl="https://mdn.alipayobjects.com/huamei_gcee1x/afts/img/A*y0ZTS6WLwvgAAAAAAAAAAAAADml6AQ/fmt.webp"
        logo="https://github.githubassets.com/images/modules/logos_page/Octocat.png"
        backgroundVideoUrl="https://gw.alipayobjects.com/v/huamei_gcee1x/afts/video/jXRBRK_VAwoAAAAAAAAAAAAAK4eUAQBr"
        title="API 接口注册"
        containerStyle={{
          backgroundColor: 'rgba(0, 0, 0,0.65)',
          backdropFilter: 'blur(4px)',
        }}
        subTitle="全球最大的接口管理平台"
        activityConfig={{
          style: {
            boxShadow: '0px 0px 8px rgba(0, 0, 0, 0.2)',
            color: token.colorTextHeading,
            borderRadius: 8,
            backgroundColor: 'rgba(255,255,255,0.25)',
            backdropFilter: 'blur(4px)',
          },
          title: '活动标题，可配置图片',
          subTitle: '活动介绍说明文字',
          action: (
            <Button
              size="large"
              style={{
                borderRadius: 20,
                background: token.colorBgElevated,
                color: token.colorPrimary,
                width: 120,
              }}
            >
              去看看
            </Button>
          ),
        }}
        actions={
          <div
            style={{
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center',
              flexDirection: 'column',
            }}
          >
          </div>
        }
      >
        <Tabs
          centered
          activeKey={loginType}
        >
          <Tabs.TabPane key={'register'} tab={'账号密码注册'} />
        </Tabs>
        {loginType === 'register' && (
          <>
            <ProFormText
              name="userAccount"
              fieldProps={{
                size: 'large',
                prefix: (
                  <UserOutlined
                    style={{
                      color: token.colorText,
                    }}
                    className={'prefixIcon'}
                  />
                ),
              }}
              placeholder={'请输入用户名'}
              rules={[
                {
                  required: true,
                  message: '请输入用户名!',
                },
              ]}
            />
            <ProFormText.Password
              name="userPassword"
              fieldProps={{
                size: 'large',
                prefix: (
                  <LockOutlined
                    style={{
                      color: token.colorText,
                    }}
                    className={'prefixIcon'}
                  />
                ),
              }}
              placeholder={'请输入密码'}
              rules={[
                {
                  required: true,
                  message: '请输入密码！',
                },
              ]}
            />
            <ProFormText.Password
              name="checkPassword"
              fieldProps={{
                size: 'large',
                prefix: (
                  <LockOutlined
                    style={{
                      color: token.colorText,
                    }}
                    className={'prefixIcon'}
                  />
                ),
              }}
              placeholder={'请确认输入密码'}
              rules={[
                {
                  required: true,
                  message: '请输入密码！',
                },
              ]}
            />
          </>
        )}
        <div
          style={{
            marginBlockEnd: 24,
          }}
        >
          <a
            style={{
              float: 'right',
            }}
          >
            去登陆
          </a>
        </div>
      </LoginFormPage>
    </div>
  );
};

export default () => {
  return (
    <ProConfigProvider dark>
      <Page />
    </ProConfigProvider>
  );
};

第二个实例：

import React, {useEffect, useRef, useState} from 'react';
import {Button, Checkbox, Form, FormInstance, Input, message} from 'antd';
import {updateInterfaceInfoUsingPost} from "@/services/yuapi/interfaceInfoController";
import {ProForm} from "@ant-design/pro-form";
import useForm = ProForm.useForm;


export type Props = {
  handleUpdateModalOpen?:any;
  actionRef?:any;
  record: API.InterfaceInfo;
}

const UpdateFrom: React.FC<Props> = (props) => {
  useEffect(
    ()=>{
      formRef.setFieldsValue(props.record);
    }
    , [props.record]
  )
  const [data,setData] = useState(props.record);
  const [formRef] = Form.useForm()
  const onFinish = async (values: any) => {
    values = {
      ...values,
      id : props.record?.id
    }
    const res = await updateInterfaceInfoUsingPost(values);
    if(res.code == 0){
      props.handleUpdateModalOpen(false);
      message.success("修改成功");
      props.actionRef.current.reload();
    }else{
      message.error(res.message);
    }
  };
  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };
  return (
    <Form
      name="更新接口"
      labelCol={{span: 8}}
      wrapperCol={{span: 16}}
      style={{maxWidth: 600}}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      autoComplete="off"
      form={formRef}
    >
      <Form.Item
      >
        <h1>接口更新</h1>
      </Form.Item>
      <Form.Item
        label="接口名称"
        name="name"
        rules={[{required: true, message: '请输入接口名称'}]}
      >
        <Input/>
      </Form.Item>

      <Form.Item
        label="接口描述"
        name="description"
        rules={[{required: false, message: '请输入接口描述'}]}
      >
        <Input/>
      </Form.Item>
      <Form.Item
        label="接口地址"
        name="url"
        rules={[{required: true, message: '请输入接口地址'}]}
      >
        <Input/>
      </Form.Item>
      <Form.Item
        label="接口调用方法"
        name="method"
        rules={[{required: true, message: '请输入接口调用方法'}]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        label="接口参数信息"
        name="requestParams"
        rules={[{required: false, message: '请输入接口参数信息'}]}
      >
        <Input.TextArea  rows={5}/>
      </Form.Item>
      <Form.Item
        label="接口请求头信息"
        name="requestHeader"
        rules={[{required: false, message: '请输入接口请求头信息'}]}
      >
        <Input.TextArea rows={5}/>
      </Form.Item>
      <Form.Item
        label="接口响应头信息"
        name="responseHeader"
        rules={[{required: false, message: ''}]}
      >
        <Input.TextArea rows={5}/>
      </Form.Item>
      <Form.Item
        label="接口状态"
        name="status"
        rules={[{required: true, message: '请输入接口状态'}]}
      >
        <Input/>
      </Form.Item>


      <Form.Item wrapperCol={{offset: 8, span: 16}}>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
}
export default UpdateFrom;