在React中提交表单后如何取消对输入的关注

Posted 2021-05-03

我正在使用React钩子和样式化组件方法在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;
}
`;

如何解决此问题？在上述浏览器中是这样的：

答案

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

样式化的组件CSS：＆。hasFocus：focus

输入prop：

初始状态：const [isSubmitted，setIsSubmitted] = React.useState（false）;

onSubmit（）{...其他代码... setIsSubmitted（true）}

希望这会有所帮助！