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 render核心阶段深入探究穿插scheduler与reconciler

    React render核心阶段深入探究穿插scheduler与reconciler

    这篇文章主要介绍了React render核心阶段穿插scheduler与reconciler,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧
    2022-11-11
  • 手动用webpack搭建第一个ReactApp的示例

    手动用webpack搭建第一个ReactApp的示例

    本篇文章主要介绍了手动用webpack搭第一个 ReactApp的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • react中braft-editor的基本使用方式

    react中braft-editor的基本使用方式

    这篇文章主要介绍了react中braft-editor的基本使用方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • react实现简单的拖拽功能

    react实现简单的拖拽功能

    这篇文章主要为大家详细介绍了react实现简单的拖拽功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • 模块化react-router配置方法详解

    模块化react-router配置方法详解

    这篇文章主要介绍了模块化react-router配置方法详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-06-06
  • React使用高德地图的实现示例(react-amap)

    React使用高德地图的实现示例(react-amap)

    这篇文章主要介绍了React使用高德地图的实现示例(react-amap),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04
  • React的createElement和render手写实现示例

    React的createElement和render手写实现示例

    这篇文章主要为大家介绍了React的createElement和render手写实现示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • react使用antd表单赋值,用于修改弹框的操作

    react使用antd表单赋值,用于修改弹框的操作

    这篇文章主要介绍了react使用antd表单赋值,用于修改弹框的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • React的组件协同使用实现方式

    React的组件协同使用实现方式

    这篇文章主要介绍了React的组件协同使用,文中给大家提到在React开发中,有哪些场景的组件协同?又如何去实现组件的协同使用呢?本文都给大家提到,感兴趣的朋友跟随小编一起看看吧
    2021-09-09
  • 浅谈react+es6+webpack的基础配置

    浅谈react+es6+webpack的基础配置

    下面小编就为大家带来一篇浅谈react+es6+webpack的基础配置。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08

最新评论