Question

我有一个使用map渲染并使用Material Ui ButtonBase组件包装的数组数据。如果单击按钮，我想获取数据名称。

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import Card, { CardContent } from 'material-ui/Card';
import Typography from 'material-ui/Typography';
import ButtonBase from "material-ui/ButtonBase";

const styles = theme => ({
    card: {
        textAlign: 'center',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
    },
    cardButton: {
        display: "block",
        textAlign: "initial",
    }
});

class SimpleMediaCard extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [
                {
                    name: 'Javascript',
                    image: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQGLecy3onT9rChTsw1BawUkuOxKE1r6yx_ViYXjqpBq8zsE_BI'
                },
                {
                    name: 'React',
                    image: 'https://lapraim.com/assets/partners/react-logo.png'
                }
            ]
        }
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick(evt) {
        alert('Name : ');
    }

    render() {
        const { classes } = this.props;
        const { data } = this.state;
        const { handleClick } = this;
        return (
            <div>
                {data.map(function(item, i) {
                    return (
                        <div key={i}>
                            <ButtonBase className={classes.cardButton} onClick={handleClick}>
                            <Card className={classes.card}>
                                <img src={item.image}  height='100px' alt={item.name}/>
                                <CardContent>
                                    <Typography component="h2">
                                        {item.name}
                                    </Typography>
                                </CardContent>
                            </Card>
                            </ButtonBase>
                        </div>
                    )               
                })}
            </div>
        )
    }
}

SimpleMediaCard.propTypes = {
    classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(SimpleMediaCard);

这是演示代码link

在上面的代码中，如果单击图片，它将显示警告。我想在每张点击的图片上显示数据名称。

任何人都可以帮我显示每张图片的数据名称吗？

Answer 1

你的意思是这样的吗？

handleClick(item) {
    alert('Name : ' + item.name);
}

<ButtonBase className={classes.cardButton} onClick={() => handleClick(item)}>

将项目传递给事件处理程序。

如何将数据值从map传递到Material UI ButtonBase onClick事件

1 个答案: