时间戳

首页 > 解决方案 > 如何在下面附加验证错误消息在反应？

reactjs - 如何在下面附加验证错误消息在反应？

问题描述

我正在尝试验证姓名和年龄的输入。两者都不能为空且年龄应超过 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;

标签： reactjs

解决方案

您可以有一个仅在错误发生时显示的默认错误，这意味着当您验证输入时，如果输入不正确，您将 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 && 
                <span className='error'>Your error message here</span>}

请注意，如果您希望您的姓名至少有 5 个字符长或任何其他先决条件，您可以使条件发生变化。

推荐阅读