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,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧2022-11-11React的createElement和render手写实现示例
这篇文章主要为大家介绍了React的createElement和render手写实现示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2022-08-08
最新评论