Блог

Я пытаюсь проверить ввод имени и возраста. Ни один из них не может быть пустым, а возраст должен быть больше 0. https://codesandbox.io/s/agitated-microservice-g5lys?file=/src/App.js

Я пробовал двумя способами.

Решение 1. добавьте проверку в сообщение об ошибке. Проблема: при начальной загрузке перед вводом пользователем уже отображается сообщение об ошибке.

 {!enteredName ? <span> error msg: Please enter your first name</span> : null}
 

Решение 2. добавьте проверку внутри функции обработчика onsubmit.
Проблема: не уверен, как добавить сообщение об ошибке.

 if (enteredName.trim().length === 0 || enteredAge.trim().length === 0) {
    return;
}
if (enteredAge < 0) {
    return;
}
 

Дополнительный вопрос: если я объединю проверку решения 2 с решением 1, это будет слишком долго. Как обернуть его в отдельную функцию и присоединить к решению 1?

Вот весь код, включая обе попытки.

 import { useState } from "react";
    
function App() {
    const [enteredName, setEnteredName] = useState("");
    const [enteredAge, setEnteredAge] = useState("");
    const [submittedUsers, setSubmittedUsers] = useState([]);

    const nameChangeHandler = (event) => {
        setEnteredName(event.target.value);
    };
    const ageChangeHandler = (event) => {
        setEnteredAge(event.target.value);
    };

    const submittedHandler = (event) => {
        event.preventDefault();

        // Solution 1
        //validate if input is empty? validate age above 0?
        if (enteredName.trim().length === 0 || enteredAge.trim().length === 0) {
            return null;
        }
        if (enteredAge < 0) {
            return null;
        }

        // lift up state
        setSubmittedUsers([
            ...submittedUsers,
            {
                name: enteredName,
                age: enteredAge,
                id: Math.random().toString()
            },
        ]);
        console.log(submittedUsers);

        setEnteredName("");
        setEnteredAge("");
    };

    return (
        <div className="App">
            <header className="App-header">
                <h3>
                    <ul>
                        <li>Display user input </li>
                        <li>Validate user input</li>
                    </ul>
                </h3>

                <form onSubmit={submittedHandler}>
                    <input
                        placeholder="your name"
                        value={enteredName}
                        type="text"
                        onChange={nameChangeHandler}
                    />
                    <br />
                    {/* Solution 2 */}
                    {!enteredName ? <span>error msg:  Please enter your first name</span> : null}
                    <br />
                    <br />

                    <input
                        placeholder="your age (number > 0)"
                        type="number"
                        value={enteredAge}
                        onChange={ageChangeHandler}
                    />
                    <br />
                    {!enteredAge ? <span> error msg: Please enter a valid age</span> : null}
                    <br />
                    <button>Submit</button>

                    <h3>
                        User input:
                        <ul>
                            {submittedUsers.map((u) => (
                                <li key={u.id}>
                                    {u.name} ({u.age} years old)
                                </li>
                            ))}
                        </ul>
                    </h3>
                </form>
            </header>
        </div>
    );
}

export default App;
 

У вас может быть ошибка по умолчанию, которая отображается только при возникновении ошибки, это означает, что при проверке входных данных, если они неверны, вы устанавливаете значение errorValue равным true.

Вот так:

Сначала объявите значение ошибки

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

Затем настройте процесс проверки:

   const submittedHandler = (event) => {
        event.preventDefault();

        // Solution 1
        //validate if input is empty? validate age above 0?
        if (enteredName.trim().length === 0 || enteredAge.trim().length === 0) {
        SetError(true)
            return null;
        }
 

А затем сделать условное отображение ошибки, только если для значения установлено значение true:

 {error amp;amp; 
                <span className='error'>Your error message here</span>}
 

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

Если вы используете <form> , вы можете установить onInvalid setCustomValidity для своего <input> . Вам также нужно будет установить make your input required или add a pattern . Вы добьетесь чего-то подобного:

Пример:

 <input
   placeholder="your name"
   value={enteredName}
   type="text"
   onChange={nameChangeHandler}
   required
   onInvalid={(e)=>{e.target.setCustomValidity("error msg:  Please enter your first name")}}
/>
 

И в nameChangeHandler you вам нужно будет сбросить валидность:

 const nameChangeHandler = (event) => {
    setEnteredName(event.target.value);
    event.target.setCustomValidity("");
};
 

Что касается ввода возраста, попробуйте установить min и max свойство.