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的基本使用,本文通过实例代码给大家讲解的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-11-11React组件实例三大核心属性State props Refs详解
组件实例的三大核心属性是:State、Props、Refs。类组件中这三大属性都存在。函数式组件中访问不到 this,也就不存在组件实例这种说法,但由于它的特殊性(函数可以接收参数),所以存在Props这种属性2022-12-12
最新评论