學習如何在react.js中使用useState來重置輸入標籤
P粉318928159
P粉318928159 2023-09-12 21:19:33
0
1
583

以下是我目前的程式碼,它輸出了我輸入的名稱,但我想建立一個重置按鈕,將狀態清空為一個空狀態

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粉318928159
P粉318928159

全部回覆(1)
P粉716228245

呼叫setFirstNamesetLastName來重置輸入值。

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

並設定<button>onClick屬性:

<button onClick={resetName}>重置!</button>
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板