【发布时间】：2021-08-10 15:05:57
【问题描述】：
我正在使用 react 并制作了一个侧边栏，它在屏幕内外显示动画，但绝对位置和更改 div 的 css right。 Here 是一个用于轻松调整代码的沙箱。
因此，当您单击蓝色框时，通过将right 设置为负值，它应该会离开屏幕，而通过将right 设置为0，应该会出现粉红色框。如您所见，这不起作用。
但是
如果您删除 popout.tsx 中的整个 useEffect 代码，那么一切都会按预期进行。
useEffect 代码负责根据 isOpen 状态对侧边栏上的文本输入进行聚焦和模糊处理。
谢谢！
编辑
如果您想查看预期的行为，请在文件 popout.tsx 中注释掉整个 useEffect。这是预期的行为粉红框输出输入焦点粉红框消失输入模糊。
整个事情的想法是蓝色框会点击我的文本和粉红色的框由于那个或使用键绑定打开。这两个动作都应该关注里面的文本输入。
一些额外的信息
如果你按下ctl + ~ ，还有一个键绑定，粉色框会出现，这就是为什么我必须根据 isOpem 状态而不是点击事件来改变焦点。
【问题讨论】：
-
但是粉红色的框意味着一旦输入被聚焦就会返回，对吧？
-
否，当粉红色框是屏幕时，输入应该被聚焦，当粉红色超出屏幕时，它应该被模糊。
-
但目前当输入焦点时粉色框正在关闭
-
我已经对它进行了编码，这样当你点击粉红色框时，即使在输入（因为输入是框）上它也会关闭粉红色框。这不是重点，尽管我希望它在打开粉色框时自动对焦。因此，正如您在 useEffect 中看到的那样，我正在寻找更改 inisOpen 道具，并取决于代码中的道具设置焦点。你可以看到粉红色的盒子出来输入它是聚焦的，当它关闭时它是模糊的，只是粉色盒子出来太多而不是正确的：0 px 在 css 中设置。我没有正确理解你的问题，但我们不想通过点击它来专注于输入，这将导致关闭
-
通常我们会使用十字按钮关闭粉色框，但现在为简单起见，我将点击处理程序放在整个东西上。
标签： javascript css reactjs typescript focus