如何在React.js中使用useState重置输入标签

你的代码里有两个问题导致重置功能失效：

1. 你写的resetName函数直接操作DOM元素的value，这不符合React的状态管理逻辑——React里UI是由状态驱动的，应该通过更新状态来修改输入框内容，而不是直接操作DOM。
2. 按钮绑定事件的方式错误，你用了value={resetName}，这根本不会触发点击事件，得用onClick属性。

下面是修改后的完整代码：

import { useState } from "react";

export default function Test() {
  const [firstName, setFirstName] = useState("");
  const [lastName, setLastName] = useState("");

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

  // 把重置函数放到组件内部，直接调用状态更新方法
  const resetName = () => {
    setFirstName("");
    setLastName("");
  };

  return (
    <div>
      First Name:
      <input
        value={firstName}
        onChange={(e) => setFirstName(e.target.value)}
      />{" "}
      <br />
      Last Name:{" "}
      <input
        value={lastName}
        onChange={(e) => setLastName(e.target.value)}
      />{" "}
      <br />
      {fullName}
      <br />
      {/* 用onClick绑定重置函数 */}
      <button onClick={resetName}>Reset!</button>
    </div>
  );
}

关键修改点说明： #

• 把resetName函数移到Test组件内部，这样它能直接访问组件里的setFirstName和setLastName方法。
• 重置函数里直接调用这两个状态更新方法，把值设为空字符串，React会自动更新输入框的内容。
• 按钮的属性改成onClick={resetName}，这样点击按钮时就会触发重置逻辑。

内容的提问来源于stack exchange，提问作者Carlos