場景：例如新增用戶，如果沒有做按鈕防連點(diǎn)，操作人員多次重復(fù)點(diǎn)擊新增按鈕，會創(chuàng)建多條重復(fù)數(shù)據(jù)。

思路：點(diǎn)擊按鈕之后，通過disabled將按鈕置成不可操作狀態(tài)，事件請求結(jié)束之后，將按鈕恢復(fù)成可操作狀態(tài)。

1.react示例

import React, { useState } from 'react'const App = (props) => {const [disabled, setDisabled] = useState(false) // 防連點(diǎn)const handleFinish = async(values) => {setDisabled(true) // 將按鈕置成不可操作狀態(tài)const { flag, data = {}} = await axios.post(ajaxParams.urls, params)setDisabled(false) // 恢復(fù)按鈕狀態(tài)if (flag === 1) {message.success('創(chuàng)建成功')}}return (<Modalvisibletitle='新增客戶'footer={null}width={700}onOk={handleSubmit}onCancel={CloseModal}><Form labelCol={4} wrapperCol={14} form={form} onFinish={handleFinish}><Form.Item noStyle><Buttontype='primary'htmlType='submit'disabled={disabled}>新增</Button><Button onClick={CloseModal} style={{ marginLeft: 15 }}>取消</Button></Form.Item></Form>) }export default ContractForm

2.Vue示例

<el-button type="primary" @click="submit" :disabled ="disabled">提交</el-button> export default {data() {return {disabled: false}},methods: {submit() {this.disabled = truesendCounselor(this.againParam).then(({flag}) => {this.disabled = falseif (flag === 1) {// do some things}}).catch((err) => {this.disabled = falseconsole.log(err)})}} }

總結(jié)

以上是生活随笔為你收集整理的按钮防连点的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。