单击 React JS 中的第一行时如何获取 Id？

如何解决单击 React JS 中的第一行时如何获取 Id？

我是 React 的新手，我正在按照教程构建一个 react-table，但我想更进一步，看看我是否可以使第一行或单元格可点击并获取该单元格的 ID。但是，我无法做到这一点。我不确定是否已经回答了这个问题，但我找不到任何答案。

App.js

function App() {
  const [data,setData] = useState([]);

  useEffect(() => {
    getData();
  },[]);
  const getData = async () => {
    const result = await axios
      .get("https://api.tvmaze.com/search/shows?q=spider")
      .then((response) => {
        setData(response.data);
        console.log(response.data);
      });

    return result;
  };

  const columns = useMemo(
    () => [
      {
        Header: "Tv Show",columns: [
        
          {
            Header: "Name",accessor: "show.name",},{
            Header: "Type",accessor: "show.type",],

Table.js

 return (
          <tr {...row.getRowProps()} data={columns} onClick={checkButton}>

这是 API 的一部分

[{"score":20.77334,"show":{"id":4107,"url":"https://www.tvmaze.com/shows/4107/spider-man","name":"Spider-Man","type":"Animation","language":"English","genres":["Action","Adventure","Children"],"status":"Ended","runtime":30,"premiered":"1967-09-09","officialSite":null,

Tbh 我不知道 checkButton 函数中应该有什么，我有很多东西要获取数据，但我无法这样做。我真的很感谢你的指导。谢谢！

解决方法

您对表格行使用 onClick 是正确的。只需添加一个简单的函数来检查行索引：

const logDataIfFirstRowClicked = (row) => {
    if (row.index === 0) {
      console.log("FIRST ROW CLICKED");
      console.log(row); // returns row object: {id: "0",original: Object,index: 0,depth: 0,cells: Array(2)…} 
      console.log(row.original) // returns the data from the row ex: {actor: "Johnny Depp",movie: "Pirates of the Carribean 1"}
    }
  };

并将其传递给您的表格行：

rows.map(row => ({
  <tr {...row.getRowProps()} onClick={() => logDataIfFirstRowClicked(row)}>
}))

您还可以使用列定义中的单元格渲染方法来添加点击。如果您只希望每行的第一个单元格在点击时返回其值，它可能如下所示：

const columns = useMemo(
    () => [
      {
        Header: "Tv Show",columns: [
        
          {
            Header: "Name",accessor: "show.name",},{
            Header: "Type",accessor: "show.type",],// Set the custom cell render here:
        Cell: (cell) => (
          <button
            // add on click to your custom cell
            onClick={() => console.log(cell.value)}
          >
            {" "}
            {cell.value}{" "}
          </button>
        )
      },]

在 DEMO 上查看此 React-Table's GitHub 和此示例

Row Properties section of React-Table docs