时间戳

首页 > 解决方案 > React Routing 导致输入失去焦点

reactjs - React Routing 导致输入失去焦点

问题描述

我有一个应用程序，其中包含一个包含输入的组件。当用户更改输入时，我想更新 URL 中的查询字符串以反映新状态。我通过检测当前location.search值和我的状态将生成的查询字符串之间的差异来实现这一点。如果有区别，我会返回一个<Redirect>带有反映新状态的查询参数的组件。

问题是，在每次这样的重定向之后，组件都会重新渲染，并且我的输入会被新的输入替换，这意味着我刚刚更改的输入不再存在，因此它没有焦点。如果是文本输入，则每次击键后都会失去焦点。

我的处理方式是记住状态更改时具有焦点的元素的 ID，然后根据document.getElementById组件完成重新渲染后将焦点设置到新元素。

我已将问题简化为位于https://codesandbox.io/s/github/TrevorMills/react-routing-conundrum的最小应用程序。问题体现在功能组件和React.Component类上。

我的机制对我来说似乎很老套。我对 React 专家的问题是，我错过了什么吗？有没有更好的方法将状态输入位置查询参数<Redirect>？我尝试添加key到我的输入中，但没有任何区别。如果我的机制看起来合法，有没有办法以更高阶的组件将其应用于整个应用程序？

提前致谢。

标签： reactjsreact-router

解决方案

由于您使用了重定向，因此每次更改输入值时，组件渲染都会在返回值和重定向之间切换，从而导致所有组件重新安装而不是重新渲染。这会导致输入字段失去焦点。

避免在更新状态后使用<Redirect />和使用。history.replace

您可以像这样 编写一个，而不是history.replace在函数中执行。onChangeTextuseEffect

useEffect(() => {
    props.history.replace(props.location.pathname + "?" + qs.stringify(state));
  }, [state]);

更新的工作示例在这里：

https://codesandbox.io/s/cocky-swirles-kcqwo?file=/src/App.js

推荐阅读