Heim > Fragen und Antworten > Hauptteil
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粉7162282452023-09-13 20:49:21
调用setFirstName
和setLastName
来重置输入值。
const [firstName, setFirstName] = useState(""); const [lastName, setLastName] = useState(""); function resetName() { setFirstName(""); setLastName(""); }
并设置<button>
的onClick
属性:
<button onClick={resetName}>重置!</button>