У меня есть компонент карты, который мне нужно обновить, чтобы добавить новые элементы - PullRequest
Новая
       15

У меня есть компонент карты, который мне нужно обновить, чтобы добавить новые элементы

1 голос
/ 07 апреля 2019

Я создал компонент карты, который показывает список пользовательских данных и изображений с помощью antd на nextJs.Я хочу создать функциональность, которая создает модал для ввода новых данных и изображений и добавляет их в пользовательский интерфейс как новую карту, но я не совсем понимаю, как обойти это.Мне нужна помощьВот ссылка на мой код ! 

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

1 Ответ

0 голосов
/ 07 апреля 2019

Таким образом, вы можете начать: https://codesandbox.io/s/1r7j6lom34?fontsize=14

Я переместил вашу статическую USER_UPLOAD в состояние Home и написал метод для добавления новой загрузки в это состояние.

Теперь вам нужно было бы найти компонент, который показывает ваш модальный режим и вызывает AddUpload с правильными значениями.

Кроме того, действия вашей карты, похоже, не работают должным образом.Чтобы исправить это, я предлагаю создать компонент оболочки для Card, который имеет состояние с соответствующими счетчиками кликов.Таким образом, каждая карта имеет свои клик-счетчики.

...