提交后未清除 Reactjs 表单

Question

我是 Reactjs 的新手，刚刚开始使用 React 双向绑定 forms.I 已经为表单编码，我希望在提交后
表单清晰。
即使提交后也不清楚。
代码错误请指出
还要检查我是否正确实现了 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;

提交后未清除 Reactjs 表单

Reactjs form is not getting cleared after submission

javascript

forms

reactjs

two-way-binding