React 在 Redux 中存储 Ref 元素

Question

您会如何在 Redux 中存储 Ref 元素？您会这样做吗？

我有一个包含一些表单元素的组件，如果用户离开页面并返回，我需要存储用户在表单中选择的字段的状态。

我尝试像这样在 Redux 中注册每个输入字段（我使用的<InputGroup>是 Blueprint.js 中的组件）：

<InputGroup
  inputRef={(ref) => { dispatch(addRefToState(ref)) }}
  ...more props...
/>

这导致了循环 JSON 引用错误，因为 Redux 正在将 ref 元素序列化为 JSON，以便将其保存到 localStorage。然后，我尝试使用我在 Stackoverflow 上找到的代码片段对对象进行“安全”字符串化，在将对象转换为 JSON 之前删除所有循环引用。这种方法可行，但 Ref 元素仍然很大，以至于存储在状态中的 3-5 个引用变成了 3MB 的 localStorage，并且我的浏览器开始变得非常慢。此外，我担心我是否可以实际使用该 Ref 对象来引用我的组件，因为我基本上修改了 Ref 对象。我还没有尝试过，因为字符串化对象的性能非常差。

我正在考虑放弃“React 方式”，只在每个组件上添加唯一的 ID，将这些 ID 存储在 Redux 中，并使用 document.querySelector 迭代 DOM，以便在加载页面时聚焦到正确的元素。但感觉就像是黑客攻击。你会怎样做呢？

Answer 1

我不确定我是否会将它们用于此目的，但这不会是实现此目的的第一种方法。

拥有一个 React 状态来存储焦点表单元素的唯一标识符是完全可以的。每个表单元素或任何一般元素都可以有一个唯一的标识符，该标识符可以是字符串。您可以将它们以任何持久性方式（例如 Web 存储）保存在应用程序的 redux 存储中。

当您离开时，您可以使用 React 效果将该状态提交到 redux 存储或持久化。

    const [lastFocusedElementId, setLastFocusedElementId] = useState();
    
    useEffect(() => {
      // here you can get last focused element id from props, or from directly storage etc, previously if any
      if(props.lastFocusedElID) {
        setLastFocusedElementId(props.lastFocusedElID);
      }
      // here in return you commit last focused id
      return saveLastFocusedElementID(lastFocusedElementId) // an action creator that saves to the redux store before every rerender of component and before unmount
    }, [props.lastFocusedElID]);

或者

const [lastFocusedElementId, setLastFocusedElementId] = useState();

useEffect(() => {
  const lastFocusedElID = window.localStorage.getItem(lastFocusedElementId);
  if (lastFocusedElID) {
    setLastFocusedElementId(lastFocusedElID);
  }
  return window.localStorage.setItem('lastFocusedElementId', lastFocusedElementId);
}, []);

更不用说您需要在onFocus要设置最后一个焦点元素 ID 的表单元素上使用。Id 可以是您选择的属性，也可以是id属性，或者您可以使用data-*属性。我id在这里展示了数据ID。

<input onFocus={e => setLastFocusedElementId(e.target.id)} />
<input onFocus={e => setLastFocusedElementId(e.dataset.id)} />

当您使用该表单元素重新打开页面时，还需要一种方法来将最后一个焦点元素集中在您选择的源中的数据上。您可以autoFocus为每个元素添加属性，例如

<input autoFocus={"elementID"===lastFocusedElementId} />

最后，如果您的用户离开表单页面而没有聚焦任何元素，您可能希望将 id 设置为基本值，例如空字符串等。在这种情况下，您需要将模糊事件与onBlur处理程序一起使用。