快捷導(dǎo)航

react清空ant.design中表單內(nèi)容的方法實現(xiàn)

更新時間：2023年12月04日 11:06:20 作者：IDIOT___IDIOT

本文主要介紹了react清空ant.design中表單內(nèi)容的方法實現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

關(guān)于清空ant.design 中表單內(nèi)容的方法

其實就兩個方法具體怎么清除一個一個試試就知道了

表單有兩個可能的屬性：

form
formRef

可以用他們綁定兩個用法在代碼部分定義：

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

清空的方法：

form.current?.setFieldsValue({這里把你的值放進(jìn)來并且賦值空字符串就好})
form.setFieldsValue({這里把你的值放進(jìn)來并且賦值空字符串就好})

使用實例：

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: '活動標(biāo)題，可配置圖片',
          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={'請確認(rèn)輸入密碼'}
              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="接口調(diào)用方法"
        name="method"
        rules={[{required: true, message: '請輸入接口調(diào)用方法'}]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        label="接口參數(shù)信息"
        name="requestParams"
        rules={[{required: false, message: '請輸入接口參數(shù)信息'}]}
      >
        <Input.TextArea  rows={5}/>
      </Form.Item>
      <Form.Item
        label="接口請求頭信息"
        name="requestHeader"
        rules={[{required: false, message: '請輸入接口請求頭信息'}]}
      >
        <Input.TextArea rows={5}/>
      </Form.Item>
      <Form.Item
        label="接口響應(yīng)頭信息"
        name="responseHeader"
        rules={[{required: false, message: ''}]}
      >
        <Input.TextArea rows={5}/>
      </Form.Item>
      <Form.Item
        label="接口狀態(tài)"
        name="status"
        rules={[{required: true, message: '請輸入接口狀態(tài)'}]}
      >
        <Input/>
      </Form.Item>


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

到此這篇關(guān)于react清空ant.design中表單內(nèi)容的方法實現(xiàn)的文章就介紹到這了,更多相關(guān)react清空ant.design表單內(nèi)容內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: