staff_data/apps/web/src/app/main/staffinfo_write/infoCard.tsx

import { Input, Button, Space } from 'antd';
import React, { useState } from 'react';

type InfoCardProps = {
    onAdd: (content: string) => void;
}
const InfoCard: React.FC<InfoCardProps> = ({ onAdd }) => {
    const [content, setContent] = useState('');
    const [addedContents, setAddedContents] = useState<string[]>([]);

    const handleAdd = () => {
        if (content) {
            onAdd(content);
            setAddedContents([...addedContents, content]);
            setContent('');
        }
    }
    return (
        // 增大内边距，避免内容被覆盖
        <div style={{ border: '1px solid #d9d9d9', padding: '24px' }}>
            <Space>
                <Input
                    placeholder='请输入内容'
                    value={content}
                    onChange={(e) => setContent(e.target.value)}
                />
                <Button type='primary' onClick={handleAdd}>添加</Button>
            </Space>
            <div style={{ marginTop: '24px' }}>
                {addedContents.map((item, index) => (
                    <div key={index}>{item}</div>
                ))}
            </div>
        </div>
    );
}
export default InfoCard;