Vite应用中@preact/signals-react异常：输入框无法输入问题求解

问题原因 #

• Signal定义位置错误：你把name signal定义在组件外部，不仅会导致多组件实例共享同一信号，还会让React组件无法自动订阅信号更新——输入后组件不会重渲染，input的value始终停留在初始值，看起来像是无法输入。
• 未使用React专属钩子：@preact/signals-react针对React提供了useSignal和useComputed钩子，用于在组件内部创建响应式信号，确保组件能正确监听信号变化并触发重渲染。

修复后的代码 #

import React from "react";
import { useSignal, useComputed } from "@preact/signals-react";

const Welcome = () => {
  // 在组件内部用useSignal创建信号，绑定组件生命周期
  const name = useSignal<string>("");
  // 用useComputed创建依赖组件内信号的计算属性
  const disabled = useComputed<boolean>(() => name.value.trim() === "");

  return (
    <div>
      <input value={name.value} onInput={e => (name.value = e.currentTarget.value)} />
      <p>Name: {name.value}</p>
      <p>Disabled: {disabled.value ? "true" : "false"}</p>
    </div>
  );
};

export default Welcome;

关键说明 #

• useSignal将信号的生命周期与组件绑定，组件会自动订阅信号的变化，信号更新时组件会立即重渲染，input的value也会同步更新。
• useComputed需在组件内部使用，它会自动追踪依赖的signal，当name的值变化时，disabled会自动重新计算。

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