React中type="reset"按钮无法清除输入框内容问题排查

问题出在受控组件的特性上：你用useState维护输入框的value，这属于React的受控组件。原生type="reset"按钮只会重置DOM输入框的默认值，但不会同步更新React的state。当你输入内容后点击reset，DOM输入框会短暂清空，但立刻会被React根据当前state重新渲染为输入后的内容，所以看起来功能没生效。

下面是两种可行的解决方法：

方法一：监听form的reset事件，同步重置state #

给form添加onReset事件，在回调里手动把state重置为初始值，让DOM和state保持同步：

import { useState } from "react";

export default function App() {
  const [name, setName] = useState("");
  
  const handleReset = () => {
    setName("");
  };

  return (
    <form onReset={handleReset}>
      <input
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Name"
        name="name"
      />
      <button>Submit</button>
      <button type="reset">Reset</button>
    </form>
  );
}

方法二：给reset按钮绑定onClick事件，手动重置state #

直接给按钮绑定点击事件，跳过原生reset的DOM操作，手动清空state：

import { useState } from "react";

export default function App() {
  const [name, setName] = useState("");
  
  const handleReset = () => {
    setName("");
  };

  return (
    <form>
      <input
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Name"
        name="name"
      />
      <button>Submit</button>
      <button type="button" onClick={handleReset}>Reset</button>
    </form>
  );
}

这里要把按钮的type改为button，避免触发原生的form重置行为，防止和手动重置逻辑冲突。

核心逻辑：受控组件的状态完全由React state主导，原生DOM操作无法自动同步state，必须手动更新state才能让输入框保持预期状态。

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