如何在 React 中为按钮组件正确添加 disabled 属性

本文详解如何在自定义 react 按钮组件中正确透传并应用 `disabled` 属性，确保其作为原生 html 属性生效，同时保持组件的类型安全与可维护性。

在 React 中，disabled 是 元素的原生布尔属性：当其存在（无论值为何）时，按钮即被禁用；若不存在，则按钮启用。因此，不能通过字符串 "true" 或 "false" 控制，而必须以布尔值形式直接透传。

你当前的组件未将 disabled prop 应用于 标签，导致传入的 disabled={true} 完全被忽略。修复方式非常简洁：只需将解构出的 disabled 属性直接赋给 的 disabled 属性即可：

import React from 'react';
import PropTypes from 'prop-types';

export default function Button({ htmlType, type, disabled, action, ...props }) {
  return (
    
      {props.children}
    
  );
}

Button.propTypes = {
  htmlType: PropTypes.string.isRequired,
  type: PropTypes.string, // 可选：补充 type 类型校验
  disabled: PropTypes.bool,
  action: PropTypes.func,
};

? 注意：onClick 事件在 disabled={true} 时自动失效，无需额外判断；React 会正确渲染 ，浏览器原生行为将阻止点击和聚焦。

调用方式保持不变，语义清晰：

 console.log('clicked')}>
  提交表单



  {isSubmitting ? '提交中...' : '立即提交'}

✅ 最佳实践补充：

• 使用 ...props 展开剩余属性，支持 className、aria-label、data-* 等通用 HTML 属性；
• 为 disabled 添加默认值 false，避免未传时为 undefined 导致意外行为（可写为 { disabled = false }）；
• 若需兼容服务端渲染（SSR），确保 disabled 始终为布尔值——避免传入 null/undefined，PropTypes 已提供基础防护。

至此，你的按钮组件既符合 HTML 规范，又具备良好的可复用性与可访问性（无障碍支持）。