如何给带预设值的表单输入框使用useState？输入无法修改的原因

我需要一个带有默认值的表单，能够捕获用户输入的任意内容。以下是我的代码：

import { useState } from "preact/hooks";

export default function test() {
  const [field1Value, setInput] = useState("");
  return (
    <div class="gap-2 w-full">
      <input
        value = 'Default value'
        onInput={(event) => setInput(event.target.value)}
      />
      {field1Value} 
    </div>
  );
}

当表单仅设置value或仅设置onInput时，均可正常工作；但同时设置两者时，用户无法修改输入内容，效果如下：

请问这是什么原因？

这是因为你把输入框做成了受控组件，但value绑定的是固定字符串'Default value'，而非状态变量field1Value。

每次用户输入时，onInput确实会更新field1Value的状态，但输入框的显示值始终被固定的'Default value'覆盖，所以看起来输入没有生效。

解决方法很简单：把value绑定到状态变量field1Value，同时把状态的初始值设为你想要的默认值：

import { useState } from "preact/hooks";

export default function test() {
  // 把初始状态设为默认值
  const [field1Value, setInput] = useState("Default value");
  return (
    <div class="gap-2 w-full">
      <input
        value={field1Value} // 绑定到状态变量
        onInput={(event) => setInput(event.target.value)}
      />
      {field1Value} 
    </div>
  );
}

这样用户输入时，状态更新会同步到输入框的value上，输入内容就能正常显示和修改了。

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