React提交时如何验证输入？支出追踪器空输入校验问题

我来帮你搞定这个输入验证的问题！你的代码目前有几个核心问题，咱们一步步修正：

问题分析 #

1. 验证逻辑顺序错误：你现在是先把支出条目添加到数组里，才去判断输入是否为空——这就导致空数据已经被存进去了，验证根本没起到拦截作用。
2. 校验不完整：只检查了expenseName，但支出金额expenseAmount也是必填项，没做校验。
3. 缺少用户反馈：校验不通过时，用户不知道哪里出了问题，得加个明确提示。

修正后的代码 #

先看修改后的addExpenses函数：

const addExpenses = () => { 
  // 1. 先做必填字段校验，trim()排除纯空格的无效输入
  if (!expenseName.trim() || !expenseAmount.trim()) {
    alert('请填写所有必填字段：支出名称和金额');
    return; // 校验失败，直接终止函数，不执行后续添加操作
  }

  // 2. 校验通过后，再添加支出到列表
  setExpense(prevState => { 
    return [ ...prevState, { id: uuidv4(), name: expenseName, amount: expenseAmount, type: expenseType } ]; 
  }); 

  // 3. 清空输入框
  setExpenseName(""); 
  setExpenseAmount(""); 
}; 

如果想要更友好的页面内提示（替代弹窗），可以添加一个错误状态来管理提示信息：

// 先在组件里定义错误提示状态
const [errorMsg, setErrorMsg] = useState('');

// 修改校验部分的代码
if (!expenseName.trim() || !expenseAmount.trim()) {
  setErrorMsg('⚠️ 请填写支出名称和金额');
  return;
} else {
  setErrorMsg(''); // 校验通过时清空错误信息
}

// 在输入框区域添加错误提示
return ( <> 
  {errorMsg && <p style={{color: '#dc2626', marginBottom: '1rem'}}>{errorMsg}</p>}
  <div className="field"> 
    <label className="label">Expense name</label> 
    <input value={expenseName} onChange={updateExpenseName} type="text" className="expense-name" placeholder="Expense name" /> 
  </div> 
  <div className="field"> 
    <label className="label">Expense amount</label> 
    <input value={expenseAmount} onChange={updateExpenseAmount} type="number" className="expense-amount" placeholder="Expense amount" /> 
  </div> 
</> );

关键说明 #

• 把校验逻辑放在最前面，确保只有合法的输入才会被添加到支出列表里。
• 使用trim()是为了过滤用户只输入空格的情况，这种输入应该视为无效。
• 页面内的错误提示比弹窗更友好，用户体验更流畅。

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