由 createStore() 管理的输入在 Solid.js 中输入后失去焦点

Question

我目前正在使用 Solid.js 开发一个网站项目，并遇到了一个问题，即由 createStore() 管理的输入在仅输入一个字符后会失去焦点。这意味着输入一个字母后，我必须再次单击输入字段才能继续输入。

• solid.js 版本：1.8.16

商店初始化：

import { createStore } from "solid-js/store";
...
const [store, setStore] = createStore({
    forwarders: ["10.0.0.0", "8.8.8.8"]
});

在我的组件中，我呈现绑定到 store.forwarders 数组的输入列表。输入后，我更新商店中的相应值：

return (
...
<For each={store.forwarder}>
  {(value, index) => {
    return (
      <input
        onInput={(e) => {
          // index() is getter of current element index
          setStore("forwarders", index(), e.currentTarget.value);
        }}
      />
    );
  }}
</For>

我尝试过但没有成功（它根本不更新商店）：

import { produce } from "solid-js/store"
...
// in <input/> :
onInput = (e) => {
  setStore{
    "forwarders",
    produce((draft) => {
      draft[index()] = e.currentTarget.value;
    })
  );
};

感谢您花时间帮助我

Answer 1

每当相应的对象更新时，

For

都会创建一个新的输入元素，这会使元素失去焦点。您应该使用

Index

来代替。

您可以在这里阅读更多相关信息：https://stackoverflow.com/a/72366316/7134134