按钮防连点

最新推荐文章于 2025-06-11 15:27:06 发布

艾迪蛋·

最新推荐文章于 2025-06-11 15:27:06 发布

阅读量613

点赞数 1

CC 4.0 BY-SA版权

文章标签： react vue

本文链接：https://blog.csdn.net/qq_43796489/article/details/119535807

场景：例如新增用户，如果没有做按钮防连点，操作人员多次重复点击新增按钮，会创建多条重复数据。

思路：点击按钮之后，通过disabled将按钮置成不可操作状态，事件请求结束之后，将按钮恢复成可操作状态。

1.react示例

import React, { useState } from 'react'


const App = (props) => {
    const [disabled, setDisabled] = useState(false) // 防连点
    const handleFinish = async(values) => {
        setDisabled(true) // 将按钮置成不可操作状态
        const { flag, data = {}} = await axios.post(ajaxParams.urls, params)
        setDisabled(false) // 恢复按钮状态
        if (flag === 1) {
          message.success('创建成功')
        }
    }
    
    return (
        <Modal
          visible
          title='新增客户'
          footer={null}
          width={700}
          onOk={handleSubmit}
          onCancel={CloseModal}
        >
          <Form labelCol={4} wrapperCol={14} form={form} onFinish={handleFinish}>
          <Form.Item noStyle>
            <Button
              type='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 = true
      sendCounselor(this.againParam).then(({flag}) => {
          this.disabled = false
          if (flag === 1) {
            // do some things
          }
        })
        .catch((err) => {
          this.disabled = false
          console.log(err)
        })
    }
  }
}