React 和 CSS-IN-JS - 浮动标签未检测到自动完成

Posted 2023-02-23

【中文标题】React 和 CSS-IN-JS - 浮动标签未检测到自动完成

【英文标题】：React and CSS-IN-JS - float labels not detecting the autocomplete

【发布时间】：2020-10-20 14:49:12

【问题描述】：

首先，我对 react 和 CSS-IN_JS 很陌生，所以这可能是一个菜鸟问题。但我无法找到一个好的答案。

我正在尝试以我正在使用的表单为我的 react-project 实现浮动标签。 项目回购： https://github.com/DawidGaleziewski/alpha-tank-full-stack/tree/master/client

我创建了一个单独的组件，它结合了标签和输入字段： https://github.com/DawidGaleziewski/alpha-tank-full-stack/blob/master/client/src/components/atoms/Inputs/InputSlider.js

为了决定标签是否应该上移，我使用输入的状态，如果它的长度 > 0，我应用样式来上移标签。

输入的状态与表单状态相关联： https://github.com/DawidGaleziewski/alpha-tank-full-stack/blob/master/client/src/components/Forms/LoginForm.js

这很好，但是，问题在于登录表单和自动完成（浏览器中保存的凭据/密码），当它们应用于浏览器时，组件会记住我为表单/输入设置的初始状态和标签覆盖了输入中的文本： picture of the issue

我能想到 2 个解决方案，但我不太确定：

不要使用情绪状态来决定标签是否应该打开，而是使用标准 css 技巧和目标输入：有效 + 标签。但是，问题是我应该在输入标签上使用 required 。而且我的应用中有很多字段是可选的。

useEffect 从组件挂载的表单中获取输入的初始状态（即 document.querySelector(input).value）。但是我不确定，因为我认为我不应该从 DOM 中获取状态值。

感觉我在这里遗漏了一些明显的东西。 感谢您的任何建议

【问题讨论】：

1.考虑input:placeholder-shownsource。 2.你可以使用useEffect观看道具，这样你就不必处理DOM source

【参考方案1】：

好吧，事实证明这不是状态的问题。 问题出在css上。为了将样式添加到浮动标签，我需要定位 输入::not(-webkit-autofill) 标签

答案在： Bad behavior of floating-labels when autocomplete