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

Question

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

Answer 1

上个快写的代码示例，用的是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

Answer 2

1. 在state保存一个属性，比如叫做disabled，默认为false

2. 在发送ajax之前，把disabled用setState设为true

3. ajax返回结果，如果没有成功，那么再用setState把disabled设为false

回答用react redux的情况，其实一样的，注意的几点：

1. 上面提到的disabled，肯定是一个内部的状态，不建议用redux来储存，直接在组件内用state来储存比较合理

2. redux的话，你需要redux-thunk middleware来做异步的action creator，具体看文档

3. 在调用action之前，用setState设为true，然后在this.props.loadData().then((data)=>{ // 这里通过判断data，设为false }).catch(()=>{ // 出错，设为false })