问题描述
我是 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 和此示例