热搜: fiddler git ip 代理
历史搜索

如何禁用React中的按钮?

游客2024-08-26 12:33:02
目录文章目录
  1. 禁用 React 中的按钮
  2. 有条件地禁用 React 中的按钮
  3. 首次单击后禁用按钮

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

效果如下:

如何禁用React中的按钮? 1

我们在按钮元素上设置了一个 onClick 事件。单击按钮后,将调用 handleClick 函数。

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

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

而事件的目标属性为我们提供了触发事件的元素的引用(可以是子元素)。

标签:React