提交后Reactjs表單沒有被清除

我是 Reactjs 的新手，剛剛開始使用 React 雙向系結表單。我為表單編碼，我希望表單在
提交后清晰。
即使提交后也不清楚。
請指出代碼中的錯誤。
還要檢查我是否正確實作了 2 路系結。
如果我錯了，請糾正我。

費用表格.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;

uj5u.com熱心網友回復：

我不知道什么是雙向系結，我不太確定為什么你的輸入沒有重置，通常當你重置輸入的值時它會改變。但是您可以在提交處理程式的末尾呼叫 event.target.reset() 來重置表單。此外，您可以通過為每個輸入分配一個 name 屬性，然后在 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;

標籤：javascript 反应 形式 双向绑定

上一篇：回應式表單重置和表單驗證

下一篇：Androidgradle插件更新至7.0版