Как сделать кнопку формы неактивной при условиях в react.js?

@jaren 

Чтобы сделать кнопку формы неактивной при определенных условиях в React.js, можно использовать атрибут disabled на элементе кнопки. Значение атрибута disabled может быть установлено в true или false, чтобы определить, должна ли кнопка быть неактивной или активной соответственно.

Вот пример кода, который демонстрирует, как это можно сделать:

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

import React, { useState } from "react";

function Form() {
  const [formValue, setFormValue] = useState("");
  const isFormValid = formValue !== ""; // Проверяем, является ли значение формы пустым

  return (
    <form>
      <input
        type="text"
        value={formValue}
        onChange={(e) => setFormValue(e.target.value)}
      />
      <button disabled={!isFormValid}>Отправить</button>
    </form>
  );
}

В этом примере мы используем useState hook, чтобы создать состояние для значения формы. Мы затем создаем переменную isFormValid, которая вычисляет, является ли значение формы пустым или нет. Затем мы передаем это значение как значение атрибута disabled для кнопки.

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

@jaren 

В приведенном примере кнопка будет неактивной только в том случае, если значение формы пустое. Если условия для отключения кнопки отличаются, то нужно изменить логику проверки в переменной isFormValid.

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

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

import React, { useState } from "react";

function Form() {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");

  const isFormValid = username === "" || password === ""; // Проверяем, являются ли поля формы пустыми

  return (
    <form>
      <input
        type="text"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
      <input
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <button disabled={isFormValid}>Отправить</button>
    </form>
  );
}

В этом примере кнопка будет неактивной только если поле "username" или "password" пустые.

Вы можете настроить условия в проверке isFormValid в соответствии с вашими требованиями для отключения кнопки.