提交后Reactjs表单没有被清除

Question

我是 Reactjs 的新手，刚刚开始使用 React 双向绑定表单。我已经编写了一个表单，我希望在
提交后清除表单。
即使提交后也不清楚。
请指出代码中的错误。
还要检查我是否正确实现了 2 路绑定。
如果我错了，请纠正我。

ExpenseForm.js

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);
    setuserInput({enteredTitle : '' , enteredAmount : '',enteredDate : ''})
    console.log(expenseData);

  };

  return (
    <form onSubmit={submitHandler}>
      <div className="new-expense__controls">
        <div className="new-expense__control">
          <label>Title</label>
          <input
            type="text"
            value={setuserInput.enteredTitle}
            onChange={TitleChangeHandler}
          />
        </div>
        <div className="new-expense__control">
          <label>Amount</label>
          <input
            type="number"
            value={setuserInput.enteredAmount}
            onChange={AmountChangeHandler}
            min="0.01"
            stepmin="0.01"
          />
        </div>
        <div className="new-expense__control">
          <label>Date</label>
          <input
            type="date"
            value={setuserInput.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;

Answer 1

我不知道双向绑定是什么，我也不太清楚为什么您的输入没有重置，通常当您重置输入的值时，它会发生变化。但是您可以在提交处理程序的末尾调用 event.target.reset() 来重置表单。此外，您可以通过为每个输入分配一个名称属性，然后在 onChangeHandler 中使用该名称来指示“userInput”对象中的键，从而将代码重构为只有一个 onChangeHandler：

const ExpenseForm = () => {
  const [userInput, setuserInput] = useState({
    enteredTitle: "",
    enteredAmount: "",
    enteredDate: ""
  });

  const onChangeHandler = (event) => {
    setuserInput((prevState) => {
      return { ...prevState, [event.target.name]: event.target.value };
    });
  };

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

    const expenseData = {
      title: userInput.enteredTitle,
      amount: userInput.enteredAmount,
      date: new Date(userInput.enteredDate)
    };
    console.log(expenseData);
    setuserInput({ enteredTitle: "", enteredAmount: "", enteredDate: "" });
    console.log(expenseData);
    event.target.reset();
  };

  return (
    <form onSubmit={submitHandler}>
      <div className="new-expense__controls">
        <div className="new-expense__control">
          <label>Title</label>
          <input
            name="enteredTitle"
            type="text"
            value={setuserInput.enteredTitle}
            onChange={onChangeHandler}
          />
        </div>
        <div className="new-expense__control">
          <label>Amount</label>
          <input
            name="enteredAmount"
            type="number"
            value={setuserInput.enteredAmount}
            onChange={onChangeHandler}
            min="0.01"
            stepmin="0.01"
          />
        </div>
        <div className="new-expense__control">
          <label>Date</label>
          <input
            name="enteredDate"
            type="date"
            value={setuserInput.enteredDate}
            onChange={onChangeHandler}
            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;