时间戳

首页 > 解决方案 > 我有一个卡片组件需要更新以添加新项目

reactjs - 我有一个卡片组件需要更新以添加新项目

问题描述

我构建了一个卡片组件，在 nextJs 上使用 antd 显示用户数据和图像列表。我想构建一个功能来创建一个模式来输入新数据和图像并将其作为新卡添加到用户界面，但我对如何使用它感到困惑。我需要帮助。这是我的代码的链接！

import React from 'react';
import { Avatar, Card, Icon, List  } from 'antd';

import { ICON_LIST, LIST_TEXTS, STYLES, USER_UPLOAD } from './constants';

const { AVATAR, CARD_CONTAINER, ICON, USER_LIST } = STYLES;
const { INNER, MORE, UPLOAD, VERTICAL } = LIST_TEXTS

class Home extends React.Component {
state = {
    clicks: 0,
};
IncrementIconText = () => {
    this.setState({ clicks: this.state.clicks + 1 });
  }
render() {
    const actions = ( ICON_LIST.map(({ type }) => (
        <span>
            <Icon key={type} type={type} onClick={this.IncrementIconText} style={ICON} />
            {this.state.clicks}
        </span>
    )));
    return (
        <List
        itemLayout={VERTICAL}
        dataSource={USER_UPLOAD}
        renderItem={item => (
            <List.Item style={USER_LIST}>  
                <Card
                    actions={actions}
                    cover={<img alt={UPLOAD} src={item.image} />}
                    extra={<Icon type={MORE} />}
                    hoverable
                    title={<a><Avatar src={item.image} style={AVATAR} />{item.user}</a>}
                    type={INNER}
                    style={CARD_CONTAINER}
                >
                    {item.story}
                </Card>
            </List.Item>
        )}
        />
    );
}
}

export default Home;

常量.js

export const ICON_LIST = [
{
    key: "heart",
    type: "heart",
},
{
    key: "dislike",
    type: "dislike",
},

 {
    key: "meh",
    type: "meh",
},
]

export const LIST_TEXTS = {
INNER: "inner",
MORE: "more",
UPLOAD: "upload",
VERTICAL: "vertical",
};

export const STYLES = {
AVATAR: {
    marginRight: 8
},
CARD_CONTAINER: {
    width: "650px",
    marginBottom: 50
},
ICON: {
    marginRight: 8 
},
USER_LIST: {
    width: "100%",
    display: "flex",
    justifyContent: "center",
    alignItems: "center"
},
};

export const USER_UPLOAD = [
{
    image: "http://sugarweddings.com/files/styles/width-640/public/1.%20The%20Full%20Ankara%20Ball%20Wedding%20Gown%20@therealrhonkefella.PNG",
    story: "Today's my birthday next week! What do you think?",
    user: "Chioma",
},
{
    image: "https://dailymedia.com.ng/wp-content/uploads/2018/10/7915550_img20181007141132_jpeg01c125e1588ffeee95a6f121c35cd378-1.jpg",
    story: "Going for an event. Do you like my outfit",
    user: "Simpcy",
},
{
    image: "https://i0.wp.com/www.od9jastyles.com/wp-content/uploads/2018/01/ankara-styles-ankara-styles-gown-ankara-tops-ankara-gowns-ankara-styles-pictures-latest-ankara-style-2018-latest-ankara-styles-ankara-ankara-styles.png?fit=437%2C544&ssl=1",
    story: "Saturdays are for weddings. Yay or nay!",
    user: "Angela",
},
]

标签： reactjsantdnext.js

解决方案

所以这可以让你开始： https ://codesandbox.io/s/1r7j6lom34?fontsize=14

我将您的静态移动USER_UPLOAD到状态Home并编写了一个方法来向该状态添加新的上传。

您现在需要想出一个组件来显示您的模态并AddUpload使用正确的值调用。

此外，您的卡片操作似乎无法正常运行。为了解决这个问题，我建议为Card它创建一个具有适当点击计数器状态的包装器组件。这样，每张卡片都有自己的点击计数器。

推荐阅读