react antd如何防止一份数据多次提交

 更新时间:2023年10月23日 11:06:42   作者:majinbo111  
这篇文章主要介绍了react antd如何防止一份数据多次提交问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

如何防止一份数据多次提交呢?

方案

利用antd 的button loading 方式实现,在点击提交按钮后,先让按钮 loading,等待接口返回结果了,再做相应的处理,最终把loading 去除。

(当然 disabed 也可实现同样的效果,个人建议是使用loading,交互会好一些)

import { Form, Input, Button, Select } from 'antd';

const { Option } = Select;
const layout = {
  labelCol: {
    span: 8,
  },
  wrapperCol: {
    span: 16,
  },
};
const tailLayout = {
  wrapperCol: {
    offset: 8,
    span: 16,
  },
};

class Demo extends React.Component {
  formRef = React.createRef();
  // create a flag
  state = {
  	submitLoading = false;
  };
  onGenderChange = value => {
    this.formRef.current.setFieldsValue({
      note: `Hi, ${value === 'male' ? 'man' : 'lady'}!`,
    });
  };

  onFinish = values => {
  	// set the flag is true
  	this.setState({submitLoading: true}, () => {
  		console.log(values);
  		//after request api, set the flag is false
  		this.setState({submitLoading: false});
  	})
    
  };

  onReset = () => {
    this.formRef.current.resetFields();
  };

  onFill = () => {
    this.formRef.current.setFieldsValue({
      note: 'Hello world!',
      gender: 'male',
    });
  };

  render() {
	let { submitLoading } = this.state;
	
    return (
      <Form {...layout} ref={this.formRef} name="control-ref" onFinish={this.onFinish}>
        <Form.Item
          name="note"
          label="Note"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          name="gender"
          label="Gender"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Select
            placeholder="Select a option and change input text above"
            onChange={this.onGenderChange}
            allowClear
          >
            <Option value="male">male</Option>
            <Option value="female">female</Option>
            <Option value="other">other</Option>
          </Select>
        </Form.Item>
        <Form.Item
          noStyle
          shouldUpdate={(prevValues, currentValues) => prevValues.gender !== currentValues.gender}
        >
          {({ getFieldValue }) =>
            getFieldValue('gender') === 'other' ? (
              <Form.Item
                name="customizeGender"
                label="Customize Gender"
                rules={[
                  {
                    required: true,
                  },
                ]}
              >
                <Input />
              </Form.Item>
            ) : null
          }
        </Form.Item>
        <Form.Item {...tailLayout}>
          <Button type="primary" htmlType="submit" loading={submitLoading}>
            Submit
          </Button>
          <Button htmlType="button" onClick={this.onReset} loading={submitLoading}>
            Reset
          </Button>
          <Button type="link" htmlType="button" onClick={this.onFill} loading={submitLoading}>
            Fill form
          </Button>
        </Form.Item>
      </Form>
    );
  }
}

ReactDOM.render(<Demo />, mountNode);

react防重复点击方法、原理

原理

在请求数据一旦开始,直到本次请求结束之前,不能进行下一次点击,否则给与相应的提示

state中的初始设置:

state={
   bool:true,
}

点击事件设置:

btn_click = async () => {
	this.setState({
	   bool: false,
	})
	.
	.
	.
	if(this.state.bool){
		const value = await fetch.bbb({})
		if (value.code == 1) {
		
		} else {
		
		}
		this.setState({
		bool: true,
		})
	}
}

解析

  • 满足bool为true的情况,我们执行请求,如果发生多次点击的情况,方法开头设置的bool:false就会生效,防止在请求还没有完成的情况下进行下一次请求;
  • 然后在请求完成之后,我们把Bool的状态变更多来,以便此次请求完成还可以进行下一次请求。
  • 至于方法开头设置为false,请求还执行,是源于一个异步机制,在同一个方法中设置state又重新调用,state是来不及更新的,但是会在下一次调用该方法的时候执行。

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • React Hooks - useContetx和useReducer的使用实例详解

    React Hooks - useContetx和useReducer的使用实例详解

    这篇文章主要介绍了React Hooks - useContetx和useReducer的基本使用,本文通过实例代码给大家讲解的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-11-11
  • react解析html字符串方法实现

    react解析html字符串方法实现

    在使用reactjs库的时候,会遇到将一段html的字符串,然后要将它插入页面中以html的形式展现,本文主要介绍了react解析html字符串方法实现,感兴趣的可以了解一下
    2023-12-12
  • React中this丢失的四种解决方法

    React中this丢失的四种解决方法

    这篇文章主要给大家介绍了关于React中this丢失的四种解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者使用React具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-03-03
  • React中用@符号编写文件路径实现方法介绍

    React中用@符号编写文件路径实现方法介绍

    在Vue中,我们导入文件时,文件路径中可以使用@符号指代src目录,极大的简化了我们对路径的书写。但是react中,要想实现这种方式书写文件路径,需要写配置文件来实现
    2022-09-09
  • React组件与事件的创建使用教程

    React组件与事件的创建使用教程

    react事件绑定时。this并不会指向当前DOM元素。往往使用bind来改变this指向,今天通过本文给大家介绍React事件绑定的方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧
    2023-02-02
  • React组件实例三大核心属性State props Refs详解

    React组件实例三大核心属性State props Refs详解

    组件实例的三大核心属性是:State、Props、Refs。类组件中这三大属性都存在。函数式组件中访问不到 this,也就不存在组件实例这种说法,但由于它的特殊性(函数可以接收参数),所以存在Props这种属性
    2022-12-12
  • 详解React获取DOM和获取组件实例的方式

    详解React获取DOM和获取组件实例的方式

    这篇文章主要介绍了React获取DOM和获取组件实例的方式,如何创建refs来获取对应的DOM呢?目前有三种方式,本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-10-10
  • React实现虚拟滚动的三种思路详解

    React实现虚拟滚动的三种思路详解

    在​​web​​开发的过程中,或多或少都会遇到大列表渲染的场景,为了解决大列表造成的渲染压力,便出现了虚拟滚动技术,本文主要介绍虚拟滚动的三种思路,希望对大家有所帮助
    2024-04-04
  • 详解如何使用React构建跑马灯组件

    详解如何使用React构建跑马灯组件

    当你想到跑马灯时,往往会想到游乐园里那些充满活力的灯光和旋转的显示,带回童年的美好回忆,本文将和大家一起探索如何在 React 中构建一个引人入胜的跑马灯组件,需要的朋友可以参考下
    2024-04-04
  • 一文理解Redux及其工作原理

    一文理解Redux及其工作原理

    这篇文章主要介绍了一文理解R通过围绕主题展开详细edux及其工作原理,文章通过主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-09-09

最新评论