Как отключить определенный button в react.js?

@delphine_bartoletti 

Чтобы отключить кнопку в React, можно установить свойство disabled кнопки на true. Это свойство определяет, должна ли кнопка быть заблокирована или нет.

Например, допустим у нас есть компонент MyButton, который представляет кнопку, которую мы хотим отключить:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

import React from "react";

function MyButton(props) {
  const handleClick = () => {
    console.log("Button clicked");
  };

  return (
    <button onClick={handleClick} disabled={props.disabled}>
      {props.label}
    </button>
  );
}

В этом примере свойство disabled передается в качестве пропса компонента MyButton. Чтобы отключить кнопку, нужно установить значение этого свойства в true.

Для этого нужно в родительском компоненте, который использует MyButton, определить состояние, которое будет определять, должна ли кнопка быть отключена, и передать это состояние в компонент MyButton через пропсы:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

import React, { useState } from "react";
import MyButton from "./MyButton";

function App() {
  const [isButtonDisabled, setIsButtonDisabled] = useState(false);

  const handleButtonClick = () => {
    setIsButtonDisabled(true);
  };

  return (
    <div>
      <MyButton
        label="Click me"
        disabled={isButtonDisabled}
        onClick={handleButtonClick}
      />
    </div>
  );
}

В этом примере isButtonDisabled - это состояние, которое определяет, должна ли кнопка быть отключена. Когда кнопка нажата, состояние isButtonDisabled устанавливается в true, и кнопка становится отключенной.

Обратите внимание, что onClick передается как пропс в компонент MyButton, поэтому при нажатии кнопки выполняется функция handleButtonClick, которая устанавливает состояние isButtonDisabled в true. Это приводит к отключению кнопки, потому что свойство disabled кнопки устанавливается в true.

@delphine_bartoletti 

Дополнительно, можно также использовать условный оператор для определения, когда кнопка должна быть отключена. Например, если нужно отключить кнопку только в определенных условиях:

1
2
3

<button disabled={props.shouldDisableButton ? true : false}>
  {props.label}
</button>

Здесь props.shouldDisableButton - это условие, которое определяет, должна ли кнопка быть отключена. Если условие истинно, кнопка будет отключена, иначе она будет активной.

Таким образом, можно динамически управлять отключением кнопки в зависимости от значений состояний или других условий в вашем приложении.