0

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

Я попробовал прописывать onChange для инпута по отдельности. Каждый из них отдельно работает нормально. В комментариях код на дисейбл кнопки. Я не знаю, как совместить этот оба onChange

type User = {
  name: string;
  password: string;
};

function Login() {
  const adminUser: User = {
    name: "admin",
    password: "admin123",
  };

  const [user, setUser] = useState({ name: "" });
  const [error, setError] = useState("");
  const Login = (inputValue: { name: string; password: string }) => {
    console.log(inputValue);
    if (
      inputValue.name === adminUser.name &&
      inputValue.password === adminUser.password
    ) {
      setUser({
        name: inputValue.name,
      });
    } else {
      setError("Fill in the fields!");
    }
  };

  return (
          <div>
        {user.name !== "" ? (
          <Redirect to={"/Chat"} />
        ) : (
          <LoginForm Login={Login} error={error} />
        )}
      </div>
)

.

import React, { FormEvent, useState } from "react";
// import React, { FormEvent, useState, useEffect } from "react";

interface ILoginForm {
  Login: (inputValue: { name: string; password: string }) => void;
  error: string;
}

const MoleculesLoginForm: React.FC<ILoginForm> = ({ Login, error }) => {
  const [inputValue, setInputValue] = useState({ name: "", password: "" });

  // const [namedError, setNamedError] = useState("");
  // const [passwordError, setPasswordError] = useState("");
  // const [formValid, setFormValid] = useState(false);
  // useEffect(() => {
  //   if (namedError || passwordError) {
  //     setFormValid(false);
  //   } else {
  //     setFormValid(true);
  //   }
  // }, [namedError, passwordError]);
  // const nameHandler = (e) => {
  //   setInputValue(e.target.value);
  //   if (e.target.value.length < 3 || e.target.value.length > 20) {
  //     setNamedError("incorrect name");
  //   } else {
  //     setNamedError("");
  //   }
  // };
  // const passHandler = (e) => {
  //   setInputValue(e.target.value);
  //   if (e.target.value.length < 3 || e.target.value.length > 9) {
  //     setPasswordError("incorrect pass");
  //   } else {
  //     setPasswordError("");
  //   }
  // };

  const submitHandler = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();

    Login(inputValue);
  };

  return (
    <div>
      <form onSubmit={submitHandler}>
        <div >
          {error !== "" ? <div className="error">{error}</div> : ""}
          <div>
            <p>User name</p>
            <input
              type="text"
              name="name"
              id="name"
              placeholder="Input user name"
              // onChange={(e) => nameHandler(e)}
              onChange={(e) =>
                setInputValue({ ...inputValue, name: e.target.value })
              }
              value={inputValue.name}
            />
          </div>
          <div>
            <p>Password</p>
            <input
              type="password"
              name="password"
              id="password"
              placeholder="Input password"
              // onChange={(e) => passHandler(e)}
              onChange={(e) =>
                setInputValue({ ...inputValue, password: e.target.value })
              }
              value={inputValue.password}
            />
          </div>
          <button
            // disabled={!formValid}
            type="submit"
          >
            Log In
          </button>
        </div>
      </form>
    </div>
  );
};

1 ответ 1

0

const MoleculesLoginForm: React.FC<ILoginForm> = ({ Login, error }) => {
  const [inputValue, setInputValue] = useState({ name: "", password: "" });
  const [formValid, setFormValid] = useState(false);

  const validate = ({name, password}) => {
    //здесь ваши проверки валидности
    const nameIsValid = name; //ваша проверка валидности name false||true
    const passIsValid = password; //ваша проверка валидности password falsa||true
    const isCredentialsValid = nameIsValid && passIsValid 
    if(isCredentialsValid !== formValid)
      setFormValid(isCredentialsValid)
  };

  const submitHandler = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();

    Login(inputValue);
  };


  //хендлер изменения инпутов
  const changeHandler = ({ currentTarget }:FormEvent<HTMLInputElement>) => {
    const { value, name } = currentTarget;
    setInputValue((prev) => {
      const formValues = { ...prev, [name]: value }
      validate(formValues)
      return formValues
    });
  };

  return (
    <div>
      <form onSubmit={submitHandler}>
        <div>
          {error !== "" ? <div className="error">{error}</div> : ""}
          <div>
            <p>User name</p>
            <input
              type="text"
              name="name"
              id="name"
              placeholder="Input user name"
              onChange={changeHandler}
              value={inputValue.name}
            />
          </div>
          <div>
            <p>Password</p>
            <input
              type="password"
              name="password"
              id="password"
              placeholder="Input password"
              onChange={changeHandler}
              value={inputValue.password}
            />
          </div>
          <button disabled={!formValid} type="submit">
            Log In
          </button>
        </div>
      </form>
    </div>
  );
};

2
  • Боже мой, когда я уже смогу начать разбираться хотя бы в подобных простых задачах. Спасибо большое! Такой момент, там у меня была проверка на количество введённых символов. Можно ли вернуть проверку и добавить изменение стиля рамки инпутов? Commented 25 окт. 2021 в 16:32
  • В комментариях обозначил, где вам необходимо выполнять проверку валидности данных. Что касается стилей, то в вашем компоненте не вижу ничего подобного, в любом случае, попробуйте самостоятельно разобраться, либо другой вопрос создайте.
    – xydope
    Commented 25 окт. 2021 в 17:06

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.