Ketahui cara menggunakan useState untuk menetapkan semula teg input dalam react.js

Question

Di bawah ialah kod semasa saya, ia mengeluarkan nama yang saya masukkan, tetapi saya mahu mencipta butang set semula yang mengosongkan keadaan kepada keadaan kosong

import { useState } from "react";

function resetName() {
  this.firstName.value = "";
  this.lastName.value = "";
}
export default function Test() {
  const [firstName, setFirstName] = useState("");
  const [lastName, setLastName] = useState("");

  const fullName = `${firstName} ${lastName}`;

  return (
    <div>
      名字：
      <input
        value={firstName}
        onChange={(e) => setFirstName(e.target.value)}
      />{" "}
      <br />
      姓氏：{" "}
      <input
        value={lastName}
        onChange={(e) => setLastName(e.target.value)}
      />{" "}
      <br />
      {fullName}
      <br />
      <button value={resetName}>重置！</button>
    </div>
  );
}

Answer 1

Panggil setFirstName和setLastName untuk menetapkan semula nilai input.

const [firstName, setFirstName] = useState("");
const [lastName, setLastName] = useState("");
function resetName() {
    setFirstName("");
    setLastName("");
}

dan tetapkan atribut <button>的onClick:

<button onClick={resetName}>重置！</button>