如何将map遍历的数组数据传递给Material UI ButtonBase的onClick事件

嘿，我来帮你搞定这个问题！要在点击Material UI的ButtonBase时拿到对应数据的name属性，有几个简单靠谱的方法，我给你拆解一下：

方法1：在onClick中直接传递目标数据的name #

这是最直观的方式，你可以在渲染ButtonBase的时候，给它的onClick事件绑定一个箭头函数，直接把当前项的name传进去。注意别直接写onClick={handleClick(item.name)}——那样会在组件渲染时就触发函数，一定要用箭头函数包裹起来：

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',
    // 你的其他样式代码
  },
  buttonBase: {
    width: '100%',
    // 按需添加样式
  }
});

class YourComponent extends React.Component {
  // 定义点击处理函数，接收name参数
  handleClick = (name) => {
    console.log('点击的项名称是:', name);
    // 这里可以写你需要的业务逻辑
  }

  render() {
    const { classes, yourDataList } = this.props; // 假设yourDataList是你的数据源数组

    return (
      <div>
        {yourDataList.map(item => (
          <Card key={item.id} className={classes.card}>
            <ButtonBase 
              className={classes.buttonBase}
              onClick={() => this.handleClick(item.name)} // 传递当前项的name
            >
              <CardContent>
                <Typography variant="title">{item.name}</Typography>
                {/* 你的其他组件内容 */}
              </CardContent>
            </ButtonBase>
          </Card>
        ))}
      </div>
    );
  }
}

YourComponent.propTypes = {
  classes: PropTypes.object.isRequired,
  yourDataList: PropTypes.array.isRequired,
};

export default withStyles(styles)(YourComponent);

方法2：通过HTML data属性获取 #

如果不想额外传递参数，你可以给ButtonBase添加一个自定义的data-name属性，然后在点击事件里通过event.currentTarget.dataset.name来读取这个值：

// 导入和样式部分和方法1一致

class YourComponent extends React.Component {
  handleClick = (event) => {
    // 从currentTarget的dataset中获取name
    const clickedName = event.currentTarget.dataset.name;
    console.log('点击的项名称是:', clickedName);
  }

  render() {
    const { classes, yourDataList } = this.props;

    return (
      <div>
        {yourDataList.map(item => (
          <Card key={item.id} className={classes.card}>
            <ButtonBase 
              className={classes.buttonBase}
              data-name={item.name} // 设置自定义data属性
              onClick={this.handleClick}
            >
              <CardContent>
                <Typography variant="title">{item.name}</Typography>
              </CardContent>
            </ButtonBase>
          </Card>
        ))}
      </div>
    );
  }
}

// propTypes和导出部分和方法1一致

方法3：绑定整个数据项（适合需要更多属性的场景） #

如果除了name之外，你还需要用到当前项的其他属性，那可以直接把整个item绑定到点击事件里。类组件里可以用bind方法，或者直接用箭头函数包裹：

// 导入和样式部分和方法1一致

class YourComponent extends React.Component {
  handleClick = (item) => {
    console.log('点击的项名称是:', item.name);
    console.log('该项的其他属性:', item.id); // 可以直接访问其他属性
  }

  render() {
    const { classes, yourDataList } = this.props;

    return (
      <div>
        {yourDataList.map(item => (
          <Card key={item.id} className={classes.card}>
            <ButtonBase 
              className={classes.buttonBase}
              // 用bind绑定当前item，或者写成onClick={() => this.handleClick(item)}
              onClick={this.handleClick.bind(this, item)}
            >
              <CardContent>
                <Typography variant="title">{item.name}</Typography>
              </CardContent>
            </ButtonBase>
          </Card>
        ))}
      </div>
    );
  }
}

// propTypes和导出部分和方法1一致

小提示 #

• 如果是函数组件，逻辑基本一致，只需要把类组件的写法改成函数式，比如用useCallback来优化点击函数，避免不必要的重渲染。
• 记得给map遍历的每一项加上唯一的key属性，这是React的要求哦。

内容的提问来源于stack exchange，提问作者Ras