如何制作一个浮动标签，当焦点或在React中有内容时，可以向上移动？

import React, { Component } from 'react';
import './FloatingLabel.css';

class FloatingLabel extends Component {
  constructor(props) {
    super(props);
    this.state = {
      labelPosition: 0
    };
  }

  componentDidMount() {
    // 监听焦点变化事件
    document.addEventListener('focus', this.handleFocus, true);
    document.addEventListener('blur', this.handleBlur, true);
    // 监听内容变化事件
    document.addEventListener('input', this.handleInput, true);
  }

  componentWillUnmount() {
    // 移除事件监听
    document.removeEventListener('focus', this.handleFocus, true);
    document.removeEventListener('blur', this.handleBlur, true);
    document.removeEventListener('input', this.handleInput, true);
  }

  handleFocus = (event) => {
    // 根据焦点状态更新标签位置
    if (event.target === this.inputRef) {
      this.setState({ labelPosition: -20 });
    }
  }

  handleBlur = (event) => {
    // 根据焦点状态更新标签位置
    if (event.target === this.inputRef && !event.relatedTarget) {
      this.setState({ labelPosition: 0 });
    }
  }

  handleInput = (event) => {
    // 根据内容状态更新标签位置
    if (event.target === this.inputRef && event.target.value) {
      this.setState({ labelPosition: -20 });
    } else {
      this.setState({ labelPosition: 0 });
    }
  }

  render() {
    const { labelPosition } = this.state;

    return (
      <div className="floating-label-container">
        <input
          ref={(ref) => { this.inputRef = ref; }}
          className="input-field"
          type="text"
        />
        <label
          className="floating-label"
          style={{ transform: `translateY(${labelPosition}px)` }}
        >
          Floating Label
        </label>
      </div>
    );
  }
}

export default FloatingLabel;