在使用 React-hook-form 进行验证的情况下，标签转换不起作用答案

【问题标题】：Label transition is not working in case of validations with React-hook-form在使用 React-hook-form 进行验证的情况下，标签转换不起作用
【发布时间】：2020-12-23 00:08:34
【问题描述】：

我正在尝试应用一种样式，当输入处于焦点时将标签移动到顶部。在我尝试添加验证之前，它运行良好。示例代码：-

 <form onSubmit={handleSubmit(onSubmit)}>
    <div className="form__group">
      <input
        className="form__input"
        type="text"
        id="name"
        name="name"
        placeholder=" "
        ref={register}
      />
      {errors.name && <p className="error">{errors.name.message}</p>}
      <label className="form__label" htmlFor="name">
        Name
      </label>
    </div>
    <input type="submit" />
  </form>

通常，如果您专注于输入，则转换会在开始时起作用。这当任何验证不满足时，就会出现问题提交并显示错误。
如果在提交表单时，验证不满足，则会出现错误消息根据验证触发，但在这种情况下，转换是即使输入处于焦点位置，也未应用。
只要错误可见，就不会应用样式，并且我不明白为什么。到目前为止，我已经推断出它是压倒一切的我的标签的样式。我似乎找不到解决方法。

提到的样式是：-

    .form__label {
    position: absolute;
    color: #777777;
    transition: all 0.3s;
    cursor: text;
    top: 16%;
    left: 6.5%;
  }
  
  form__input {
    &:focus {
      border: 2px solid blue;
      & + .form__label {
        top: 3px;
        left: 10px;
        color: blue;
      }
    }
    
    &:not(:placeholder-shown) + .form__label {
      top: 3px;
      left: 10px;
      color: blue;
    
    }
  }

上述问题的沙箱是here

【问题讨论】：

标签： html reactjs sass yup react-hook-form

【解决方案1】：

问题是在上述情况下选择了直接兄弟而不是“+”组合符，“~”组合符应该被使用。

“+”组合器选择直接兄弟，在没有错误的情况下是标签。所以它在一开始就可以工作，但在其他情况下会失败。
“~”组合器选择在所有情况下都可以使用的通用兄弟。

如果出现错误，标签不是导致问题的直接兄弟。

【讨论】：