我正在使用 React Hook 和样式化组件方法在 React 中制作一个注册表单组件。我能够制作组件，但提交后，在 mozilla(开发人员版)中，所有输入字段都设置了轮廓。这在 chrome 中不是这样......
下面是组件样式:
const Input = styled.input`
outline: none;
padding: 5px;
margin-bottom: 10px;
border-radius: 3px;
border: none;
line-height: 1.5rem;
background-color: #F2F2F2;
&::placeholder {
opacity: 0.4;
}
&:focus,
&:active {
border-color: transparent;
border-bottom: 2px solid #a3a3a3;
}
`;
如何解决这个问题？这是它在上述浏览器中的样子:
最佳答案
尝试使用条件 css className，在提交表单后从输入中删除焦点 className。
样式化组件 CSS:&.hasFocus:focus
输入属性:< Input className={!isSubmitted ? ‘有焦点’:{}}/>
初始状态:const [isSubmitted, setIsSubmitted] = React.useState(false);
onSubmit() { ...其他代码... setIsSubmitted(true) }
希望这对您有所帮助!
关于javascript - 如何在 React 中提交表单后删除对输入的关注，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58594545/