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

Пользователь

от jaren , в категории: JavaScript , 7 месяцев назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от autumn_parker , 7 месяцев назад

@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 для кнопки.


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