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

const [values,setValues] = useState([
  question: "",
  topic: "",
  age: "",
  gender: "",
  consent: false,
]];

const [error,setError] useState([]);

Я нажимаю кнопку, которая запускает функцию проверки:

let validate = () => {

 const { age, gender, topic, consent } = values;
 let validationErrors = [];

  if (!age) {
   let ageError = { name: "Age" };
   validationErrors.push(ageError);
  }
  If (!gender) {
   let genderError = { name: "Gender" };
   validationErrors.push(genderError);
  }
  if (validationErrors.length > 0) {
   setError(validationErrors);
  } else {
     setError([]);
     return true;
  }

Как мне теперь, например, добавить класс в каждое поле, в котором отсутствует значение при нажатии кнопки.

Вот jsx для одного из моих входов:

 <select
   value={values.topic}
   name="topic"
   onChange={handleInputChange}
    >
      <option value="">Velg tema</option>
      {categories.nodes.map(topic => (
      <option key={topic._id} value={topic._id}>
        {topic.title}
      </option>
     ))}
  </select>

Я пытался использовать

 className={values.gender ? "" : "gend"}

И этот gend - это класс с красной рамкой.

1
Eirik Vattøy 16 Фев 2021 в 14:44

3 ответа

Лучший ответ

Я создал одну маленькую картинку. В идеале вы должны справиться с этим, используя какую-либо библиотеку форм, например formik. Вот код:

import { useState } from "react";
import "./styles.css";

export default function App() {
  const [values, setValues] = useState({
    question: "",
    topic: "",
    age: "",
    gender: "",
    consent: false
  });
  const [error, setError] = useState([]);

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    if (error.includes(name)) {
      setError(error.filter((e) => e !== name));
    }
    setValues({ ...values, [name]: value });
  };

  const handleSubmit = (e) => {
    const { question, topic } = values; //can add rest according to your requirement
    const errorList = [];
    if (!question) {
      errorList.push("question");
    }
    if (!topic) {
      errorList.push("topic");
    }
    console.log(errorList);
    setError(errorList);
  };
  console.log(error);
  return (
    <div className="App">
      <div>
        <input
          type="text"
          placeholder="question"
          name="question"
          value={values.question}
          onChange={handleInputChange}
          className={error.includes("question") ? "error" : ""}
        />
      </div>
      <div>
        <input
          type="text"
          placeholder="topic"
          name="topic"
          value={values.topic}
          onChange={handleInputChange}
          className={error.includes("topic") ? "error" : ""}
        />
      </div>

      <select value={values.topic} name="topic" onChange={handleInputChange}>
        <option value="">Velg tema</option>
      </select>

      <button onClick={handleSubmit}>Validate</button>
    </div>
  );
}

Вот демонстрация: https: // codeandbox.io/s/romantic-cohen-61xru?file=/src/App.js:0-1589

1
Shubham Verma 16 Фев 2021 в 12:39

Для каждого ввода в вашем JSX добавьте этот атрибут:

className={classNames('yourClass', {error: !age})} //example for age input

И в свой CSS добавьте класс error :

.error {
   border: red solid 1px;
}

Итак, вам необходимо установить модуль classNames , вы можете узнать о classNames здесь: https://www.npmjs.com/package/classnames

0
Soufiane Boutahlil 16 Фев 2021 в 12:03

Let validate = () => {

    const { age, gender, topic, consent } = values;
    let validationErrors = [];

    if (!age) {
        let ageError = { name: "Alder" };
        validationErrors.push(ageError);
        document.getElementsById('name').style.borderColor = "red";
    }
    If(!gender) {
        let genderError = { name: "Kjønn" };
        validationErrors.push(genderError);
        document.getElementsById('gender').style.borderColor = "red";

    }
    if (validationErrors.length > 0) {
        setError(validationErrors);

    } else {
        setError([]);
        return true;
    }
0
syed ali hamza 16 Фев 2021 в 12:06
66223755