如何在react原生中创建自定义动画浮动标签TextInput？

import React, { Component } from 'react';

class FloatingTextInput extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isFocused: false, // 用于判断输入框是否获得焦点
    };
  }

  handleFocus = () => {
    this.setState({ isFocused: true });
  };

  handleBlur = () => {
    this.setState({ isFocused: false });
  };

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

    return (
      <div className={`floating-text-input ${isFocused ? 'focused' : ''}`}>
        <label>{this.props.label}</label>
        <input
          type="text"
          onFocus={this.handleFocus}
          onBlur={this.handleBlur}
        />
      </div>
    );
  }
}

export default FloatingTextInput;

.floating-text-input {
  position: relative;
}

.floating-text-input label {
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 0.3s, font-size 0.3s, top 0.3s;
  transform-origin: top left;
}

.floating-text-input input {
  padding-top: 20px; /* 预留出标签的空间 */
}

.floating-text-input.focused label,
.floating-text-input input:not(:placeholder-shown) + label {
  transform: translateY(-100%) scale(0.8);
  font-size: 12px;
  top: -10px;
}

import React from 'react';
import FloatingTextInput from './FloatingTextInput';

function App() {
  return (
    <div>
      <FloatingTextInput label="姓名" />
      <FloatingTextInput label="邮箱" />
    </div>
  );
}

export default App;