Solid.js中createStore管理的输入框更新后失焦问题求助

问题原因分析 #

1. 拼写错误：<For>组件中遍历的store.forwarder是笔误，应为store.forwarders，该错误会导致遍历数组不存在，引发渲染异常。
2. 输入框未绑定value：输入框未与store中的值做双向绑定，仅在onInput时更新store但视图未同步，且每次更新store后可能触发DOM元素重建，导致焦点丢失。
3. produce写法语法错误：使用produce时将setStore(误写为setStore{，括号使用错误导致store无法更新。

正确实现代码 #

基础修复版本 #

import { createStore } from "solid-js/store";
import { For } from "solid-js";

const [store, setStore] = createStore({
    forwarders: ["10.0.0.0", "8.8.8.8"]
});

return (
  // ...其他组件内容
  <For each={store.forwarders}>
    {(value, index) => {
      return (
        <input
          value={value} // 绑定value，同步视图与store数据
          onInput={(e) => {
            setStore("forwarders", index(), e.currentTarget.value);
          }}
        />
      );
    }}
  </For>
);

使用produce的正确版本 #

若偏好使用produce更新store，修正语法错误即可：

import { createStore, produce } from "solid-js/store";
import { For } from "solid-js";

const [store, setStore] = createStore({
    forwarders: ["10.0.0.0", "8.8.8.8"]
});

return (
  // ...其他组件内容
  <For each={store.forwarders}>
    {(value, index) => {
      return (
        <input
          value={value}
          onInput={(e) => {
            setStore(
              "forwarders",
              produce((draft) => {
                draft[index()] = e.currentTarget.value;
              })
            );
          }}
        />
      );
    }}
  </For>
);

额外说明 #

Solid.js的<For>组件会根据数组元素的稳定性复用DOM节点，绑定value后，更新store仅会修改输入框的value值，不会重建DOM元素，因此不会丢失焦点。同时，index()作为信号getter，在For的回调函数这个响应式上下文中调用是完全合法的。

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