Preact中Input2无法同步Input1值为默认值的问题排查与解决

为什么value2没有立即更新？ #

你当前的代码里，Input2的value用了value2 || value1的渲染逻辑——这只是让Input2显示value1的内容，但并没有真正更新value2这个状态变量。value2只有在用户手动修改Input2时才会被setValue2触发更新，所以当Input1输入内容时，value2依然是空字符串，导致依赖它的任务无法触发。

针对测试代码的修复 #

如果要让value2在Input1输入时自动同步（且用户修改Input2后保留自定义值），可以用useEffect监听value1的变化，仅当value2为空时同步更新它：

import { useState, useEffect } from "preact/hooks";

export default function Test() {
  const [value1, setValue1] = useState("");
  const [value2, setValue2] = useState("");

  // 监听value1变化，当value2未被修改时同步更新
  useEffect(() => {
    if (!value2) {
      setValue2(value1);
    }
  }, [value1, value2]);

  console.log("value1:", value1);
  console.log("value2:", value2);

  return (
    <div>
      <input type="text" autoFocus
        value={value1}
        onInput={e => setValue1(e.target.value)}
      />
      <input type="text"
        value={value2}
        onInput={e => setValue2(e.target.value)}
      />
      <br />
      Value2: {value2}
    </div>
  );
}

修改后，Input1输入内容时，只要用户还没手动修改过Input2，value2就会自动同步，此时依赖value2的逻辑（比如页面显示、后续任务）都能正常触发。用户修改Input2后，value2不再为空，后续Input1的变化不会覆盖它。

贴合业务场景的优化方案 #

你的实际需求是：用户粘贴URL到搜索栏后弹出模态框，弹窗内的URL字段自动填充，且依赖该字段的任务在弹窗打开时立即执行。这种场景下，**在弹窗打开的瞬间初始化value2**比实时同步更合理：

1. 触发弹窗时，直接将搜索栏的URL赋值给value2，并执行任务：

// 假设这是打开弹窗的触发函数
const openModal = () => {
  // 同步搜索栏的URL到表单字段
  setValue2(value1);
  // 打开弹窗
  setIsModalOpen(true);
  // 立即执行依赖value2的任务
  runMetadataTasks(value2);
};

2. 弹窗内的URL输入框直接绑定value2，支持用户手动编辑：

{/* 弹窗内的URL输入框 */}
<input type="text"
  value={value2}
  onInput={e => setValue2(e.target.value)}
/>

这种方式的优势：

• 弹窗打开时value2已经完成初始化，依赖它的任务可以立刻执行，不需要用户做无意义的编辑
• 用户修改URL后，value2会实时更新，可根据需求重新触发任务

注意：Preact中使用onInput替代onChange是正确的，它能实时响应输入变化，更适合这类实时同步/更新的场景。

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