如何在具有预定义值的表单输入上使用State？

Question

我想要一个带有默认值的表单，并且用户输入的任何值都会被捕获。这是我的代码：

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

，反之亦然，那么它会按预期工作。但如果两者都出现，那么用户就无法更改它。看起来像这样：

为什么会出现这种情况？

Answer 1

您正在将输入的值设置为硬编码值

 value = 'Default value'

您需要将其设置为字段值

value={field1Value}

，然后在输入状态中设置预定义值

 const [field1Value, setInput] = useState("Default Value");

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}
        placeholder="Enter value"
        onInput={(event) => setInput(event.target.value)}
      />
      {field1Value} 
    </div>
  );
}