时间戳

首页 > 解决方案 > 将数据从映射数组传递到 MaterialUI 抽屉

reactjs - 将数据从映射数组传递到 MaterialUI 抽屉

问题描述

几个星期以来，我一直在玩弄 React。我正处于我需要更高效、更灵活地表示数据的时候。我有一个像这样的简单数组：

const projects = [
    {
        name: 'Google',
        type: 'Browser',
        img: '/img/projects/new/google.jpg',
        url:'http://google.com/',
    },
    {
        name: 'Windows',
        type: 'OS',
        img: '/img/projects/new/windows.jpg',
        url:'http://microsoft.com/',
    },
    {
        name: 'Apple',
        type: 'Computer',
        img: '/img/projects/new/apple.jpg',
        url:'http://apple.com/',
    },
];

和我的组件类（简化）：

class Home extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            openDrawer: false,
        }
    }

    handleDrawerOpen = () => { this.setState({ openDrawer: true }); };
    handleDrawerClose = () => { this.setState({ openDrawer: false }); };

    render() {
        return (
            <div>
                {
                    projects.map((project, i) => (
                        <div key={i}>
                            <img src={project.img} alt={project.name} />
                            <h6>{project.name}</h6>
                            <p>{project.type}</p>
                            <a target="_blank" href={project.url}> <WebIcon/> </a>
                            <a onClick={this.handleDrawerOpen}> <LinkIcon/> </a>
                            <LSDrawer
                                open={this.state.openDrawer}
                                clickClose={this.handleDrawerClose}
                                title={project.name}
                                anchor='top'
                                rightButtons={
                                    <Fab
                                        color="secondary"
                                        size="small"
                                        aria-label="Close"
                                        onClick={this.handleDrawerClose}>
                                        <CloseIcon />
                                    </Fab>
                                }>
                                Some info will go in here
                            </LSDrawer>
                        </div>
                    ))
                }
            </div>
        );
    }
}

export default (Home);

这是代码框，如果您愿意，您可以在其中玩耍

现在，这就是我想学习的内容。如何仅将被单击的项目传递给抽屉？因此，如果我点击 Windows 项目，抽屉在标题中​​显示“Windows”，如果我点击“Google”，我会看到“Google”作为抽屉标题，依此类推。一旦我学会了这一点，我就可以从那里扩展并将图像传递给抽屉主体和其他所有东西。本质上将相同的概念应用于模态窗口等。

我正在寻找一些实用的东西。你最有可能在专业领域看到的东西（别把组件拆分成可重用的组件，我可以做的那部分，事实上，LSDrawer 是一个可重用的组件）

提前致谢！

标签： reactjs

解决方案

要让一个抽屉动态更改内容，您需要从地图函数中删除抽屉，并在您的状态中保存对单击对象的引用，以便将正确的数据提供给抽屉组件。

不清楚这是否是示例代码，但您可以更改打开的处理程序并将其绑定到图标，如下所示：

handleDrawerOpen = (index) => {
    this.setState({ openDrawer: true, currentIndex: index });
  };

...

<a onClick={() => this.handleDrawerOpen(i)}>

并将您的抽屉移到地图调用之外，以根据保存的索引为其提供所需的标题：

        <LSDrawer
          open={this.state.openDrawer}
          clickClose={this.handleDrawerClose}
          title={this.state.projects[this.state.currentIndex].name}
          anchor="top"
          rightButtons={
            <Fab
              color="secondary"
              size="small"
              aria-label="Close"
              onClick={this.handleDrawerClose}
            >
              <CloseIcon />
            </Fab>
          }
        >
          Some info will go in here
            </LSDrawer>

注意我还将项目变量保存到状态，因为数据存储是它的主要功能。

叉在这里。

推荐阅读