JIYIK CN >

Use the disabled attribute to disable buttons in React, for example <button disabled={true}>Click</button>. We can use this attribute to conditionally disable a button based on the value of an input field or other variable, or to prevent multiple clicks on a 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>
  );
}

The first example shows how to disable a button when the input field is empty.

We use useStatethe hook to store the input value.

To disable a button in React, we have to set disabledthe attribute on the element.

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

The example above uses logical NOT (!)operators to negate the value of a message variable.

In other words, if the message variable stores an empty string, which is a false value, we set the disabled property to true and disable the button.

All other string values ​​are truthy, so negating a truthy value disabledsets the button's property to false .

We can also use a condition to determine if the button should be disabled.

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

This example uses if/elsethe ternary operator very similar to the statement.

?The expression before the question mark is evaluated, and if it returns a true value, the operator returns the value before the colon, otherwise it returns the value after the colon.

In other words, if isAnonymousthe variable stores a truthy value, we return true and disable the button, otherwise we return false to keep the button enabled.

The last example shows how to prevent multiple clicks on a button by disabling it after the first click.

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

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

We set a onClickproperty on the button element. When the button is clicked, handleClickthe function is called.

We use the event's currentTargetproperty to get a reference to the button and disabledset its property to true .

The event's currentTargetproperty gives us access to the element to which the event listener is attached.

And the event's targetproperty gives us a reference to the element (possibly a descendant) that triggered the event.

Related reading:

• How to disable links in React