如何在React/Next.js中为按钮添加/移除disabled属性

要实现提交按钮在请求过程中禁用、响应后恢复的功能，核心是用React的状态来控制按钮的disabled属性，这也是React数据驱动UI的标准做法，具体步骤如下：

1. 添加状态管理 #

首先用useState钩子创建一个状态变量，用来标记当前是否正在提交请求：

import { useState } from 'react';
import axios from 'axios';

// 组件内部
const [isSubmitting, setIsSubmitting] = useState(false);

2. 绑定状态到按钮的disabled属性 #

把状态变量直接绑定到提交按钮的disabled属性上：

<form className="row" id="home_contact_form" onSubmit={handleSubmit}>
  <input 
    type="submit" 
    value="send" 
    className="sendbtn" 
    id="sendbtn" 
    disabled={isSubmitting} {/* 绑定状态控制禁用 */}
  />
</form>

3. 修改handleSubmit函数 #

在请求发送前设置状态为true禁用按钮，请求完成（成功或失败）后再设置为false恢复按钮：

const handleSubmit = (e) => {
  e.preventDefault();
  // 请求开始时禁用按钮
  setIsSubmitting(true);
  
  axios
    .post("xxxxxxxxxxxxxxxxxxxxxxxxxxx", data)
    .then(function (response) {
      // 处理成功逻辑，比如提交成功提示
      console.log('提交成功', response);
    })
    .catch(function (error) {
      // 必须处理请求失败的情况，避免按钮一直处于禁用状态
      console.error('提交失败', error);
    })
    .finally(function () {
      // 无论成功还是失败，最终都恢复按钮可用
      setIsSubmitting(false);
    });
}

为什么不直接操作DOM？ #

虽然可以通过document.getElementById('sendbtn')直接修改按钮的disabled属性，但这种方式不符合React的数据流理念，容易导致UI和状态不一致，尤其是在Next.js的服务端渲染场景下，直接操作DOM可能引发意外问题，推荐始终用状态来控制UI属性。

内容的提问来源于stack exchange，提问作者nick