码云前端开发 2024-02-12

如何禁用React中的按钮?

文章目录隐藏

禁用 React 中的按钮
有条件地禁用 React 中的按钮
首次单击后禁用按钮

禁用 React 中的按钮

使用禁用属性禁用 React 中的按钮。

我们可以使用相关属性，根据输入字段或其他变量的值有条件地禁用按钮，或者防止多次单击按钮。

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 />

      {/* ✅ 禁用按钮 */}
      <button disabled={true}>Click</button>

      <hr />

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

      <hr />

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

效果如下：

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

<div>
  <input
    type="text"
    id="message"
    name="message"
    value={message}
    onChange={event => setMessage(event.target.value)}
  />
  <button disabled={!message}>Click</button>
</div>

我们在输入元素上设置onChange事件，因此每当其值发生变化时，就会调用所提供的函数。

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

const [message, setMessage] = useState('');

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

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

此示例使用逻辑非（！）运算符来否定消息变量的值。

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

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

如果你需要禁用一个链接，请按照我的文章“如何在 React 中禁用链接”中的说明进行操作。

有条件地禁用 React 中的按钮

您还可以使用条件语句来确定是否应该禁用按钮。

<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>
  );
}

效果如下：