提交后 React Hooks 清除输入

Question

我开始使用 Hooks，并且我有一个带有多个输入的 useState 对象。我想了解的是如何在提交表单后清除输入值。

在 sumbit 函数 I setInput({ Input1: "", Input2: "" }); 上，这实际上会清除对象值，但不会清除输入值。

另外，不知道为什么console.log(input); 会出现多次。

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [input, setInput] = useState({ Input1: "", Input2: "" });
  const [button, setButton] = useState("Button");
  console.log(input);

  const _handleChange = e => {
    setInput({ ...input, [e.target.name]: e.target.value });
  };

  function _handleSubmit(e) {
    e.preventDefault();
    setInput({ Input1: "", Input2: "" });
    setButton("Submitted");
    setTimeout(() => setButton("Button"), 1000);
    console.log("Submitted");
  }

  return (
    <form onSubmit={_handleSubmit}>
      <input
        type={"text"}
        placeholder={"Input1"}
        name={"Input1"}
        onChange={_handleChange}
      />
      <input
        type={"text"}
        placeholder={"Input2"}
        name={"Input2"}
        onChange={_handleChange}
      />
      <button text="Save" type="submit">
        {button}
      </button>
    </form>
  );
}

Answer 1

目前，您的input 是不受控制的组件，它不知道由_handleChange 处理的状态input.Input1。

尝试向其添加 value 属性。

见controlled vs uncontrolled component.

<input value={input.Input1} onChange={_handleChange} />

---

此外，日志在_handleSubmit 上出现两次，因为您更改了两次状态：

1. 批处理设置状态 - 导致单个渲染和第一个日志。

setInput({ Input1: '', Input2: '' });
setButton('Submitted');

1. 您设置了timeout，它会在1000ms 之后更改状态 - 导致单个渲染和第二个日志。

setTimeout(() => setButton('Button'), 1000);