0

首先，我对 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

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

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

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

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

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

4

1 回答 1

0

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

答案在： 自动完成时浮动标签的不良行为

于 2020-07-25T21:09:54.680 回答