javascript - 如何在 React 中提交表单后删除对输入的关注

Question

我正在使用 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;
}
`;

如何解决这个问题？这是它在上述浏览器中的样子:

Answer 1

尝试使用条件 css className，在提交表单后从输入中删除焦点 className。

样式化组件 CSS:&.hasFocus:focus

输入属性:< Input className={!isSubmitted ? ‘有焦点’:{}}/>

初始状态:const [isSubmitted, setIsSubmitted] = React.useState(false);

onSubmit() { ...其他代码... setIsSubmitted(true) }

希望这对您有所帮助!