如何在单击时将文本组件转换为输入组件？

import React, { useState } from 'react';

const TextToInput = () => {
  const [isEditing, setIsEditing] = useState(false);
  const [text, setText] = useState('Click to edit');

  const handleClick = () => {
    setIsEditing(true);
  };

  const handleChange = (e) => {
    setText(e.target.value);
  };

  const handleBlur = () => {
    setIsEditing(false);
  };

  return (
    <div>
      {isEditing ? (
        <input
          type="text"
          value={text}
          onChange={handleChange}
          onBlur={handleBlur}
        />
      ) : (
        <span onClick={handleClick}>{text}</span>
      )}
    </div>
  );
};

export default TextToInput;