React/Next.js中输入值非法时如何显示红色提示文本？

你可以通过添加状态管理错误信息、增加验证逻辑，来实现输入框不符合要求时显示红色警告的效果。以下是基于你现有代码修改的完整示例：

import { useState } from 'react';

export default function TodoForm() {
  const [desc, setDesc] = useState('');
  // 新增状态存储输入框的错误信息
  const [errorDesc, setErrorDesc] = useState('');

  const handleAddTodo = () => {
    // 先清空之前的错误信息
    setErrorDesc('');
    
    // 自定义验证逻辑：这里以输入不能为空且长度至少3个字符为例
    if (!desc.trim()) {
      setErrorDesc('请输入内容');
      return;
    }
    if (desc.length < 3) {
      setErrorDesc('内容长度不能少于3个字符');
      return;
    }

    // 验证通过后执行添加逻辑
    console.log('添加待办:', desc);
    // 提交后重置输入框
    setDesc('');
  };

  // 输入变化时自动清除错误提示，提升用户体验
  const handleInputChange = (e) => {
    setDesc(e.target.value);
    if (errorDesc) {
      setErrorDesc('');
    }
  };

  return (
    <div>
      <input
        aria-required
        className={`bg-white text-black h-40px text-lg hover:border-blue-400 border-solid border-b-2 w-[87%] ${errorDesc ? 'border-red-500' : ''}`}
        id="todo-desc"
        placeholder="请输入待办内容"
        value={desc}
        onChange={handleInputChange}
        required
      />
      {/* 条件渲染错误警告，仅当存在错误时显示 */}
      {errorDesc && <p className="text-red-500 text-sm mt-1">{errorDesc}</p>}

      <button 
        className="p-2 w-[20%] rounded-2xl bg-blue-500 text-white border-0 outline-none hover:bg-blue-400" 
        onClick={handleAddTodo}
      >
        Add
      </button>
    </div>
  );
}

关键说明： #

• 状态管理：用errorDesc状态保存错误提示文本，初始为空，仅在验证不通过时赋值。
• 验证逻辑：点击按钮时先校验输入内容，不符合规则则设置错误文本并终止后续操作；验证通过再执行添加逻辑。
• 视觉提示：错误状态下给输入框添加红色边框，同时在下方显示红色警告文本，让用户直观感知问题。
• 体验优化：输入内容变化时自动清除错误提示，避免错误文本持续显示干扰用户输入。

你可以根据实际需求修改验证规则（比如格式限制、字符类型要求等），调整错误文本内容和样式细节。

内容的提问来源于stack exchange，提问作者orgil naranhuu