时间戳

首页 > 解决方案 > 如何使用onClick事件获取json中id的数据

javascript - 如何使用onClick事件获取json中id的数据

问题描述

我正在使用 axios 让我的 api 显示其中的一些数据。这工作正常。当我单击“TableRow”时，我想获取每个值并显示返回的数据

这是我的 json 数据。 在此处输入图像描述

我想像这样获取 id 并使用 axios api。

  const toDetails = (e) => {
    e.preventDefault();
    const getDetails = async () => {
    const response = await axios.get(`api/firstmemory/${id}`);
    setUserData(response.data.data);
     }
     getDetails();
    }

内部回报

 return(
        <TableContainer component={Paper}>
        <Table className={classes.table}>
          <TableHead>
            <TableRow>
              <TableCell>things</TableCell>
              <TableCell >date</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {userData.map((row,index) => (
              <TableRow key={index}>
                <TableCell>{row.first}</TableCell>
                <TableCell>{row.date}</TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>
    );

谁能帮我解决这个问题？谢谢你。

标签： javascriptreactjsaxiosmaterial-ui

解决方案

您可以添加onClick处理对行的单击和data-id属性以存储行上的 id 值。

<TableRow key={index} onClick={handleRowClick} data-id={row.id}>
   <TableCell>{row.first}</TableCell>
   <TableCell>{row.date}</TableCell>
</TableRow>

然后你可以在点击处理程序中读取 data-id 属性的值

function handleRowClick(e) {
   let id = e.currentTarget.getAttribute('data-id')
   // Your axios code here
}

推荐阅读