如何在React待办列表中用useState禁止提交空表单并给出填写提示

核心改动点 #

• 新增errorMsg状态变量，用于管理空提交的提示信息
• 表单提交时先校验任务名称、执行期限去除首尾空格后是否为空，任一为空则拦截提交逻辑
• 错误提示会在3秒后自动消失，不影响后续操作
• 移除了提交按钮上重复绑定的onClick事件（表单本身已绑定onSubmit，回车和点击按钮都会触发，避免重复执行提交逻辑）

完整可运行代码 #

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

export let Tasks = () => {
    let [tasksList, setTasksList] = useState([]);
    let [nameOfTask, setNameOfTask] = useState('');
    let [termOfTask, setTermOfTask] = useState('');
    // 新增错误提示状态
    let [errorMsg, setErrorMsg] = useState('');

    let createTask = (isInput, termOfTask) => {
        let newTask = {
            id: Math.random().toString().substr(1,90),
            task: isInput,
            term: termOfTask
        }
        setTasksList([...tasksList, newTask])
    }

    useEffect(() => {
        setTasksList(JSON.parse(localStorage.getItem('tasksList')) || []);
    },[])

    useEffect(() => {
        localStorage.setItem('tasksList', JSON.stringify(tasksList));
    },[tasksList])

    let getValueNameOfTask = (e) => {
        setNameOfTask(e.target.value)
    }

    let getValueOfTaskTerm = (e) => {
        setTermOfTask(e.target.value);
    }

    let taskCreated = (e) => {
        e.preventDefault();
        // 新增空值校验逻辑
        const trimmedTask = nameOfTask.trim()
        const trimmedTerm = termOfTask.trim()
        if (!trimmedTask || !trimmedTerm) {
            setErrorMsg('禁止提交空表单，请补全任务名称和执行期限')
            // 3秒后自动清空错误提示
            setTimeout(() => setErrorMsg(''), 3000)
            return
        }
        createTask(trimmedTask, trimmedTerm)
        setNameOfTask('');
        setTermOfTask('');
    }

    let taskFinished = (id) => {
        setTasksList(tasksList.filter(todo => todo.id !== id))
    }

    return (
        <div className="tasks_page">
            <div className="form_part">
                <form onSubmit={taskCreated} className="form_of_new_task">
                    <label>新建任务</label>
                    <input
                        type="text"
                        id="name_of_task"
                        placeholder="任务名称"
                        onChange={getValueNameOfTask}
                        value={nameOfTask}
                    />
                    <input
                        type="text"
                        id="term_of_task"
                        placeholder="执行期限"
                        onChange={getValueOfTaskTerm}
                        value={termOfTask}
                    />
                    {/* 错误提示渲染 */}
                    {errorMsg && <p style={{color: 'red', margin: '8px 0'}}>{errorMsg}</p>}
                    <button id="submit">创建</button>
                </form>
            </div>
            <div className="tasks_to_do">
                <h1>待执行任务列表：{tasksList.length}</h1>
                <div>
                    {tasksList.map(el => 
                        <div key={el.id} className="different_task">
                            <h1>{el.task}</h1>
                            <p>{el.term}</p>
                            <button onClick={() => taskFinished(el.id)}>已完成</button>
                        </div>
                    )}
                </div>
            </div>
        </div>
    )
}

效果说明 #

提交空内容或者全空格内容时，不会创建新任务，同时会在表单下方显示红色的错误提示，3秒后提示自动消失。

内容的提问来源于stack exchange，提问作者Dmitry Chernyak