在React中动态添加一个输入标记，显示片刻，然后消失

import React, { useState, useEffect } from 'react';

const InputTag = () => {
  const [showTag, setShowTag] = useState(false);

  useEffect(() => {
    setShowTag(true);

    const timer = setTimeout(() => {
      setShowTag(false);
    }, 3000);

    return () => clearTimeout(timer);
  }, []);

  return (
    <div>
      {showTag && <input type="text" placeholder="输入标记" />}
    </div>
  );
};

export default InputTag;

import React, { useState } from 'react';
import InputTag from './InputTag';

const ParentComponent = () => {
  const [showInputTag, setShowInputTag] = useState(false);

  const handleButtonClick = () => {
    setShowInputTag(!showInputTag);
  };

  return (
    <div>
      <button onClick={handleButtonClick}>
        {showInputTag ? '移除输入标记' : '添加输入标记'}
      </button>
      {showInputTag && <InputTag />}
    </div>
  );
};

export default ParentComponent;