时间戳

首页 > 解决方案 > 如何在反应中通过单击按钮来捕获映射数据？

javascript - 如何在反应中通过单击按钮来捕获映射数据？

问题描述

我用 react 创建了以下组件。我正在加载JSON 数据以填充表格，其中一列有一个删除按钮。要删除您的用户，我需要在单击按钮后获取用户 ID 。我可以为每个表格行加载一个删除按钮，但我无法为每个按钮单击获取用户 ID。

加载页面后，控制台会立即加载所有用户 ID，而无需单击删除按钮。单击删除按钮后，如何获取特定用户的用户 ID？

零件：

class EnhancedTable extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      userID: null
    };
    this.deleteUserById = this.deleteUserById.bind(this);
  }

  componentDidMount() {
    API.post("user/all", [], config).then(({ data }) => {
      this.setState({
        data: data.response.data.map(user => (user.id, user.name, user.email))
      });
    });
  }

  deleteUserById(n) {
    console.log("user id", n);
  }

  render() {
    return (
      <TableBody>
        {data.map(n => {
          return (
            <>
              <TableCell>{n.name}</TableCell>
              <TableCell>{n.email}</TableCell>
              <TableCell>
                <DeleteIcon
                  onClick={this.deleteUserById(n.id)}
                  className="action"
                />
              </TableCell>
            </>
          );
        })}
      </TableBody>
    );
  }
}

标签： javascriptreactjs

解决方案

您this.deleteUserById直接在渲染上调用。您想为onClickprop 提供一个函数，该函数将在事件发生时被调用。

<DeleteIcon onClick={() => this.deleteUserById(n.id)} className="action" />

推荐阅读