React.js表单提交后未清空问题排查及双向绑定实现校验

问题原因&修正方案 #

你代码里的核心错误是表单输入框的value属性绑定错误，导致双向绑定没有生效，这也是你提交后清空状态但表单内容不变的直接原因，其他细节问题也一并列出：

1. 双向绑定错误修正 #

你把所有input的value错误绑定到了状态更新函数setuserInput上，实际上应该绑定到状态变量userInput的对应属性，三处input都需要修改：

• 原错误写法：value={setuserInput.enteredTitle}
• 修正后写法：value={userInput.enteredTitle}
  同理修改金额、日期输入框的value属性即可。

你的onChange事件处理逻辑是正确的，用函数式更新保留旧状态修改指定字段的写法符合React规范，没有问题。

2. 输入框属性错误修正 #

金额输入框的步长属性写法错误，stepmin="0.01"是无效属性，正确属性名是step，修改为step="0.01"即可生效。

3. 可选规范优化 #

状态更新函数命名建议遵循React小驼峰规范，把setuserInput改成setUserInput，可读性更好，不影响代码运行。

修正后完整代码 #

import React, { useState } from "react";

const ExpenseForm = () => {
  // 小驼峰规范命名更新函数
  const [userInput, setUserInput] = useState({enteredTitle : '' , enteredAmount : '',enteredDate : ''});

  const TitleChangeHandler = (event) => {
    setUserInput((prevState) => {
      return { ...prevState, enteredTitle: event.target.value };
    });
  };
  const AmountChangeHandler = (event) => {
    setUserInput((prevState) => {
      return { ...prevState, enteredAmount: event.target.value };
    });
  };
  const DateChangeHandler = (event) => {
    setUserInput((prevState) => {
      return { ...prevState, enteredDate: event.target.value };
    });
  };

  const submitHandler = (event) => {
    event.preventDefault();

    const expenseData = {
      title: userInput.enteredTitle,
      amount: userInput.enteredAmount,
      date: new Date(userInput.enteredDate),
    };
    console.log(expenseData);
    // 清空状态逻辑本身正确，绑定value后就会同步到表单
    setUserInput({enteredTitle : '' , enteredAmount : '',enteredDate : ''})
  };

  return (
    <form onSubmit={submitHandler}>
      <div className="new-expense__controls">
        <div className="new-expense__control">
          <label>Title</label>
          <input
            type="text"
            value={userInput.enteredTitle}
            onChange={TitleChangeHandler}
          />
        </div>
        <div className="new-expense__control">
          <label>Amount</label>
          <input
            type="number"
            value={userInput.enteredAmount}
            onChange={AmountChangeHandler}
            min="0.01"
            step="0.01"
          />
        </div>
        <div className="new-expense__control">
          <label>Date</label>
          <input
            type="date"
            value={userInput.enteredDate}
            onChange={DateChangeHandler}
            min="2019-01-01"
            max="2022-12-31"
          />
        </div>
        <div className="new-expense__actions">
          <button type="submit">Submit</button>
        </div>
      </div>
    </form>
  );
};

export default ExpenseForm;

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