javascript - react中按钮点击之后禁止再次点击该怎么写？

问题描述

问 题

点击按钮请求ajax,如果成功则按钮不能再点击并变灰色。这样做是为了防止重复点击，在react中该怎么写呢？

解决方案

上个快写的代码示例，用的是fetch API。另外写了一个用setTimeout模拟的方法:

图例如下:

代码如下:

import React from 'react'

class AppTest2 extends React.Component {
  constructor() {
    super()

    this.state = { isClickable: true }
  }

  handleButtonClickTest = (e) => {
    this.setState({ isClickable: false })

    const promise = new Promise((resolve, reject) => {
      setTimeout(resolve, 3000)
    })

    promise.then(() => {
      this.setState({ isClickable: true })
    })
  }

  handleButtonClick = (e) => {
    // 按钮为不可点按状态
    this.setState({ isClickable: false })

    fetch('http://localhost:8888/items', {
      method: 'GET'
    })
    .then((response) => {
      // ok 代表状态码在 200-299
      if (!response.ok) throw new Error(response.statusText)
      return response.json()
    })
    .then((items) => {
      // 载入数据
      // this.setState({items})

      // 回复按钮可被点按状态
      this.setState({ isClickable: true })
    })
    .catch((error) => {
      // 回复按钮可被点按状态
      this.setState({ isClickable: true })
      // 异常处理
      console.error(error)
    })
  }

  render() {
    return (
      <button
        onClick={this.handleButtonClickTest}
        disabled={!this.state.isClickable}
        >
        {this.state.isClickable ? '点按送出AJAX' : '正在处理中...'}
      </button>
    )
  }
}

export default AppTest2

这篇关于javascript - react中按钮点击之后禁止再次点击该怎么写？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！