Heim  >  Fragen und Antworten  >  Hauptteil

Erfahren Sie, wie Sie useState verwenden, um Eingabe-Tags in reagieren.js zurückzusetzen

Unten ist mein aktueller Code, er gibt den Namen aus, den ich eingegeben habe, aber ich möchte eine Reset-Schaltfläche erstellen, die den Status in einen leeren Status zurücksetzt

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>
  );
}
P粉318928159P粉318928159426 Tage vor565

Antworte allen(1)Ich werde antworten

  • P粉716228245

    P粉7162282452023-09-13 20:49:21

    调用setFirstNamesetLastName来重置输入值。

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

    并设置<button>onClick属性:

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

    Antwort
    0
  • StornierenAntwort