迹忆客 专注技术分享

使用 disabled 属性来禁用 React 中的按钮，例如 <button disabled={true}>Click</button>。 我们可以使用该属性根据输入字段或其他变量的值有条件地禁用按钮，或者防止多次单击按钮。

import {useState} from 'react';

export default function App() {
  const [message, setMessage] = useState('');
  const isAnonymous = true;

  const handleClick = event => {
    event.currentTarget.disabled = true;
    console.log('button clicked');
  };

  return (
    <div>
      {/* ✅ 输入为空时禁用按钮 */}
      <div>
        <input
          type="text"
          id="message"
          name="message"
          value={message}
          onChange={event => setMessage(event.target.value)}
        />
        <button disabled={!message}>Click</button>
      </div>

      <hr />

      {/* ✅ disable button */}
      <button disabled={true}>Click</button>

      <hr />

      {/* ✅ 有条件地禁用按钮 */}
      <button disabled={isAnonymous ? true : false}>Click</button>

      <hr />

      {/* ✅ 单击一次后禁用按钮 */}
      <button onClick={handleClick}>Click</button>
    </div>
  );
}

第一个示例显示了如何在输入字段为空时禁用按钮。

我们使用 useState 钩子来存储输入的值。

要在 React 中禁用按钮，我们必须在元素上设置 disabled 属性。

<button disabled={!message}>Click</button>

上面的示例使用逻辑 NOT (!) 运算符来否定消息变量的值。

换句话说，如果 message 变量存储了一个空字符串，这是一个假值，我们将 disabled 属性设置为 true 并禁用按钮。

所有其他字符串值都是真值，因此否定一个真值会将按钮的 disabled 属性设置为 false。

我们还可以使用条件来确定是否应禁用按钮。

<button disabled={isAnonymous ? true : false}>Click</button>

该示例使用与 if/else 语句非常相似的三元运算符。

问号 ? 前的表达式被求值，如果返回真值，则运算符返回冒号前的值，否则返回冒号后的值。

换句话说，如果 isAnonymous 变量存储了一个真值，我们返回 true 并禁用按钮，否则返回 false 使按钮保持启用状态。

最后一个示例显示了如何通过在第一次单击后禁用按钮来防止多次单击按钮。

export default function App() {
  const handleClick = event => {
    event.currentTarget.disabled = true;
    console.log('button clicked');
  };

  return (
    <div>
      {/* ✅ 单击一次后禁用按钮 */}
      <button onClick={handleClick}>Click</button>
    </div>
  );
}

我们在按钮元素上设置了一个 onClick 属性。 当按钮被点击时，handleClick 函数被调用。

我们使用事件的 currentTarget 属性来获取对按钮的引用并将其 disabled 属性设置为 true。

事件的 currentTarget 属性使我们能够访问事件监听器附加到的元素。

而事件的 target 属性为我们提供了对触发事件的元素的引用（可能是后代）。

相关阅读：

• 如何在 React 中禁用链接