Question

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

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;

constants.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",
},
]

Answer 1

因此，这可以帮助您入门： https://codesandbox.io/s/1r7j6lom34?fontsize=14

我将您的静态USER_UPLOAD移到了Home的状态，并编写了一种将新的上传内容添加到该状态的方法。

您现在需要提供一个可以显示模态的组件，并使用正确的值调用AddUpload。

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

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

1 个答案: