reactjs - 当输入不聚焦时使输入标签保持不变

Question

我有一个带有输入和标签的样式组件。标签在聚焦时向上移动，在未聚焦时向下移动。

当输入中有值或我未聚焦输入时，如何使标签保持不变？

我的代码：

        import React from "react";
        import styled from "styled-components";
        
        const Wrapper = styled.div`
          position: relative;
        `;
        
        const Input = styled.input`
          font-size: 18px;
          padding: 10px 10px 10px 5px;
          display: block;
          width: 300px;
          border-bottom: 1px solid #757575;
          &:focus {
            outline: none;
          }
        `;
        
        const Label = styled.label`
          color: #999;
          font-size: 18px;
          font-weight: normal;
          position: absolute;
          pointer-events: none;
          left: 5px;
          top: 10px;
          transition: 0.2s ease all;
          input:focus ~ &,
          input:not(:placeholder-shown).input:not(:focus) ~ .label {
          top: -20px;
          font-size: 14px;
          color: #5264ae;
      }
`;
        
        const FloatingInput = () => (
          <Wrapper>
            <Input />
            <Label>First Name</Label>
          </Wrapper>
        );
        
        export default FloatingInput;

标签： reactjsstyled-components

Answer 1

为标签添加一个required属性input并添加一个选择器。input:valid ~ &当输入具有某些值时，它将变为“有效”，CSS 选择器将选择该值并应用与聚焦时相同的样式。

const Input = styled.input.attrs(() => ({
  required: true,
}))`
  font-size: 18px;
  padding: 10px 10px 10px 5px;
  display: block;
  width: 300px;
  border-bottom: 1px solid #757575;
  &:focus {
    outline: none;
  }
`;

const Label = styled.label`
  color: #999;
  font-size: 18px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 5px;
  top: 10px;
  transition: 0.2s ease all;
  input:focus ~ &,
  input:not(:placeholder-shown).input:not(:focus) ~ .label,
  input:valid ~ & {
    top: -20px;
    font-size: 14px;
    color: #5264ae;
  }
`;

const FloatingInput = () => (
  <Wrapper>
    <Input />
    <Label>First Name</Label>
  </Wrapper>
);

如果您想切换“聚焦”样式并使其在聚焦后保持不变，您将需要一些 React 状态来保持触发状态。

const Input = styled.input`
  font-size: 18px;
  padding: 10px 10px 10px 5px;
  display: block;
  width: 300px;
  border-bottom: 1px solid #757575;
  &:focus {
    outline: none;
  }
`;

const focusCSS = css`
  top: -20px;
  font-size: 14px;
  color: #5264ae;
`;

const Label = styled.label`
  color: #999;
  font-size: 18px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 5px;
  top: 10px;
  transition: 0.2s ease all;
  input:focus ~ &,
  input:not(:placeholder-shown).input:not(:focus) ~ .label {
    ${focusCSS}
  }
  ${({ focused }) => focused && focusCSS}
`;

const FloatingInput = () => {
  const [focused, setFocused] = React.useState(false);
  return (
    <Wrapper>
      <Input onFocus={() => setFocused(true)} />
      <Label focused={focused}>First Name</Label>
    </Wrapper>
  );
};