时间戳

首页 > 解决方案 > React：如何在 React 中提交时验证输入？

reactjs - React：如何在 React 中提交时验证输入？

问题描述

我正在制作一个费用跟踪器，它根据输入中的值在提交时制作费用列表。现在我想验证输入是否为空，如果它们是空的，我想提醒用户他们需要填写必填字段。到目前为止，我已经完成了这项工作，但到目前为止还无法正常工作

const addExpenses = () => {



 setExpense(prevState => {
      return [
        ...prevState,
        {
          id: uuidv4(),
          name: expenseName,
          amount: expenseAmount,
          type: expenseType
        }
      ];
    });
    if(expenseName === '') return;
    setExpenseName("");
    setExpenseAmount("");
  };

return (
    <>
      <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>

标签： reactjs

解决方案

首先要使用一些基本的 HTML 验证。像下面这样，我使用了一个表单，并且在我的输入中是必需的。通过使用这个，你不能提交保持任何空白的表格

<form onSubmit={handleSubmit}>
  <input
    required
    type="text"
    className="expense-name"
    placeholder="Expense name"
  />

  <button type="submit">Submit</button>
</form>

但是仍然有一些验证，比如如果使用给任何空间，所以在你的handleSubmit添加一些逻辑，如下所示

const handleSubmit = () =>{
    //as example i am only showing for expenseName
    if(expenseName.trim().length === 0){
        alert('Wrong Input');
    }else{
        //do your job
    }
}

完整示例

https://codesandbox.io/embed/dreamy-cherry-qt1qw?fontsize=14&hidenavigation=1&theme=dark

推荐阅读