正文

避免antd表单重复提交的5个实用技巧

/0 浏览量
0402

在现代Web应用开发中，防止表单重复提交是一个常见且重要的需求。antd作为React的一个UI库，提供了丰富的组件，但在处理表单提交时，有时候会遇到重复提交的问题。以下是一些避免antd表单重复提交的实用技巧：

技巧一：使用防抖（Debounce）或节流（Throttle）技术

1. 防抖（Debounce）

防抖技术可以确保在指定的时间内，即使多次触发事件，也只执行最后一次操作。以下是一个使用防抖技术防止表单重复提交的示例：

import React, { useState } from 'react';
import { Button, Form } from 'antd';

function DebounceForm() {
  const [form] = Form.useForm();
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleSubmit = async () => {
    if (isSubmitting) return;
    setIsSubmitting(true);
    try {
      await form.validateFields();
      // 模拟提交操作
      console.log('提交数据:', form.getFieldsValue());
      // 提交成功后的操作
    } catch (errInfo) {
      console.log('提交错误:', errInfo);
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <Form form={form} onFinish={handleSubmit}>
      <Form.Item name="username" rules={[{ required: true, message: '请输入用户名' }]}>
        <input placeholder="请输入用户名" />
      </Form.Item>
      <Form.Item name="password" rules={[{ required: true, message: '请输入密码' }]}>
        <input type="password" placeholder="请输入密码" />
      </Form.Item>
      <Button type="primary" htmlType="submit" disabled={isSubmitting}>
        {isSubmitting ? '提交中...' : '提交'}
      </Button>
    </Form>
  );
}

2. 节流（Throttle）

节流技术与防抖类似，但它在指定的时间内会限制事件触发的次数。以下是一个使用节流技术防止表单重复提交的示例：

import React, { useState } from 'react';
import { Button, Form } from 'antd';

function ThrottleForm() {
  const [form] = Form.useForm();
  const [isSubmitting, setIsSubmitting] = useState(false);

  const throttleTimer = useRef(null);
  const handleSubmit = async () => {
    if (isSubmitting) return;
    setIsSubmitting(true);
    if (throttleTimer.current) {
      clearTimeout(throttleTimer.current);
    }
    throttleTimer.current = setTimeout(async () => {
      try {
        await form.validateFields();
        console.log('提交数据:', form.getFieldsValue());
      } catch (errInfo) {
        console.log('提交错误:', errInfo);
      } finally {
        setIsSubmitting(false);
        throttleTimer.current = null;
      }
    }, 1000); // 1秒内最多提交一次
  };

  return (
    <Form form={form} onFinish={handleSubmit}>
      <Form.Item name="username" rules={[{ required: true, message: '请输入用户名' }]}>
        <input placeholder="请输入用户名" />
      </Form.Item>
      <Form.Item name="password" rules={[{ required: true, message: '请输入密码' }]}>
        <input type="password" placeholder="请输入密码" />
      </Form.Item>
      <Button type="primary" htmlType="submit" disabled={isSubmitting}>
        {isSubmitting ? '提交中...' : '提交'}
      </Button>
    </Form>
  );
}

技巧二：禁用提交按钮

在提交过程中，可以将提交按钮设置为禁用状态，这样可以避免用户在表单提交后再次点击提交按钮。

const [isSubmitting, setIsSubmitting] = useState(false);

<Button type="primary" htmlType="submit" disabled={isSubmitting}>
  {isSubmitting ? '提交中...' : '提交'}
</Button>

技巧三：监听键盘事件

监听键盘事件，如回车键（Enter），防止用户在表单提交后按下回车键再次触发提交。

window.addEventListener('keydown', (event) => {
  if (event.key === 'Enter') {
    event.preventDefault();
  }
});

技巧四：使用状态管理库

使用状态管理库（如Redux）来控制表单的提交状态，从而避免重复提交。

// 在Redux store中添加提交状态
const initialState = {
  isSubmitting: false,
};

// action creator
const submitForm = () => ({
  type: 'SUBMIT_FORM',
  payload: true,
});

const submitFormSuccess = () => ({
  type: 'SUBMIT_FORM_SUCCESS',
  payload: false,
});

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'SUBMIT_FORM':
      return { ...state, isSubmitting: true };
    case 'SUBMIT_FORM_SUCCESS':
      return { ...state, isSubmitting: false };
    default:
      return state;
  }
};

// 在组件中使用
const handleSubmit = () => {
  dispatch(submitForm());
  // ...提交逻辑
  dispatch(submitFormSuccess());
};

技巧五：设置请求超时时间

在发起网络请求时，设置合理的超时时间，并在请求超时后取消正在进行的请求，以防止重复提交。

axios.post('/api/submit', data, {
  timeout: 5000, // 5秒超时
}).then((response) => {
  // ...处理成功
}).catch((error) => {
  if (error.code === 'ECONNABORTED') {
    console.log('请求超时');
  } else {
    // ...处理错误
  }
});

以上是避免antd表单重复提交的5个实用技巧，你可以根据自己的实际需求选择合适的方法进行实现。

-- 展开阅读全文 --