Reactjs 如何从应用程序组件访问my react可重用表单元格数据

我已经创建了一个表组件，这样我就可以在我的项目的不同部分重用它，因为我需要它更灵活，也需要更好地实践如何做到这一点 我的目标：在我的好友组件中我试图捕获用户点击的单元格

好友组件

const Friends = () => {


    // My goal is to get the the information about the clickedcell here


    const theadData = ["Name", "Email", "Date"];

    const tbodyData = [
        {
            id: "1",
            items: ["Peter", "peter@email.com", "01/01/2021"],
        },
        {
            id: "2",
            items: ["Foo", "foo@email.com", "12/24/2020"],
        },
        {
            id: "3",
            items: ["bar", "bar@email.com", "12/01/2020"],
        },
    ];
    return(
      <div>
        <Table theadData={theadData}
          tbodyData={tbodyData} />
      </div>
    )
}

export default Friends;

import React from 'react'
import TableHeaderItem from './tableHead'
import TableRow from './tableRow'

const Table = ({theadData, tbodyData}) => {
  

  return (
    <table>
      <thead>
        <tr>
          {
            theadData.map(headerTitle => {
             return <TableHeaderItem
                      key={headerTitle}
                      item={headerTitle} />
            })
          }
        </tr>
      </thead>
      <tbody>
          {
              tbodyData.map(row => {
                console.log("rowID", row.id)
                return <TableRow
                        onRowClicked={() => console.log('user clicked on row #', row.id)}
                        key={row.id}
                        rowData={row.items} />
              })
          }

      </tbody>
    </table>
  )
}

export default Table

import TableCell from './tableCell'


const TableRow = ({ rowData, onRowClicked, onCellClick}) => {

  return(
      <tr
        onClick={onRowClicked} >
        {
          
          rowData.map(cell => {
            return (
              <TableCell
                key={cell}
                cellData={cell}

                onCellClicked={()=>console.log('user cliecked on cell name',cell)}
          
                />)})
        }
      </tr>
  )
}

export default TableRow;

const TableCell = ({   cellData, onCellClicked}) => {

  return (
      <td
        onClick={onCellClicked}>{cellData}</td>
  )
}

export default TableCell;

constfriends=（）=>{
//我的目标是在这里获取有关clickedcell的信息
const theadadata=[“姓名”、“电子邮件”、“日期”]；
常数tbodyData=[
{
id:“1”，
项目：[“彼得”peter@email.com", "01/01/2021"],
},
{
id:“2”，
项目：[“Foo”foo@email.com", "12/24/2020"],
},
{
id:“3”，
项目：[“条形图”bar@email.com", "12/01/2020"],
},
];
返回(
)
}
导出默认好友；

表格组件

const Friends = () => {


    // My goal is to get the the information about the clickedcell here


    const theadData = ["Name", "Email", "Date"];

    const tbodyData = [
        {
            id: "1",
            items: ["Peter", "peter@email.com", "01/01/2021"],
        },
        {
            id: "2",
            items: ["Foo", "foo@email.com", "12/24/2020"],
        },
        {
            id: "3",
            items: ["bar", "bar@email.com", "12/01/2020"],
        },
    ];
    return(
      <div>
        <Table theadData={theadData}
          tbodyData={tbodyData} />
      </div>
    )
}

export default Friends;

import React from 'react'
import TableHeaderItem from './tableHead'
import TableRow from './tableRow'

const Table = ({theadData, tbodyData}) => {
  

  return (
    <table>
      <thead>
        <tr>
          {
            theadData.map(headerTitle => {
             return <TableHeaderItem
                      key={headerTitle}
                      item={headerTitle} />
            })
          }
        </tr>
      </thead>
      <tbody>
          {
              tbodyData.map(row => {
                console.log("rowID", row.id)
                return <TableRow
                        onRowClicked={() => console.log('user clicked on row #', row.id)}
                        key={row.id}
                        rowData={row.items} />
              })
          }

      </tbody>
    </table>
  )
}

export default Table

import TableCell from './tableCell'


const TableRow = ({ rowData, onRowClicked, onCellClick}) => {

  return(
      <tr
        onClick={onRowClicked} >
        {
          
          rowData.map(cell => {
            return (
              <TableCell
                key={cell}
                cellData={cell}

                onCellClicked={()=>console.log('user cliecked on cell name',cell)}
          
                />)})
        }
      </tr>
  )
}

export default TableRow;

const TableCell = ({   cellData, onCellClicked}) => {

  return (
      <td
        onClick={onCellClicked}>{cellData}</td>
  )
}

export default TableCell;

从“React”导入React
从“./tableHead”导入TableHeaderItem
从“./TableRow”导入TableRow
常数表=（{theadadata，tbodyData}）=>{
返回(
{
theadata.map（headerTitle=>{
返回
})
}
{
tbodyData.map（行=>{
console.log（“rowID”，row.id）
返回console.log（'user clicked on row#'，row.id）}
key={row.id}
rowData={row.items}/>
})
}
)
}
导出默认表

表格行组件

const Friends = () => {


    // My goal is to get the the information about the clickedcell here


    const theadData = ["Name", "Email", "Date"];

    const tbodyData = [
        {
            id: "1",
            items: ["Peter", "peter@email.com", "01/01/2021"],
        },
        {
            id: "2",
            items: ["Foo", "foo@email.com", "12/24/2020"],
        },
        {
            id: "3",
            items: ["bar", "bar@email.com", "12/01/2020"],
        },
    ];
    return(
      <div>
        <Table theadData={theadData}
          tbodyData={tbodyData} />
      </div>
    )
}

export default Friends;

import React from 'react'
import TableHeaderItem from './tableHead'
import TableRow from './tableRow'

const Table = ({theadData, tbodyData}) => {
  

  return (
    <table>
      <thead>
        <tr>
          {
            theadData.map(headerTitle => {
             return <TableHeaderItem
                      key={headerTitle}
                      item={headerTitle} />
            })
          }
        </tr>
      </thead>
      <tbody>
          {
              tbodyData.map(row => {
                console.log("rowID", row.id)
                return <TableRow
                        onRowClicked={() => console.log('user clicked on row #', row.id)}
                        key={row.id}
                        rowData={row.items} />
              })
          }

      </tbody>
    </table>
  )
}

export default Table

import TableCell from './tableCell'


const TableRow = ({ rowData, onRowClicked, onCellClick}) => {

  return(
      <tr
        onClick={onRowClicked} >
        {
          
          rowData.map(cell => {
            return (
              <TableCell
                key={cell}
                cellData={cell}

                onCellClicked={()=>console.log('user cliecked on cell name',cell)}
          
                />)})
        }
      </tr>
  )
}

export default TableRow;

const TableCell = ({   cellData, onCellClicked}) => {

  return (
      <td
        onClick={onCellClicked}>{cellData}</td>
  )
}

export default TableCell;

从“./TableCell”导入TableCell
const TableRow=（{rowData，onRowClicked，onCellClick}）=>{
返回(
{
rowData.map（单元格=>{
返回(
log（'user cliecked on cell name'，cell）}
/>)})
}
)
}
导出默认表行；

TabelCell组件

const Friends = () => {


    // My goal is to get the the information about the clickedcell here


    const theadData = ["Name", "Email", "Date"];

    const tbodyData = [
        {
            id: "1",
            items: ["Peter", "peter@email.com", "01/01/2021"],
        },
        {
            id: "2",
            items: ["Foo", "foo@email.com", "12/24/2020"],
        },
        {
            id: "3",
            items: ["bar", "bar@email.com", "12/01/2020"],
        },
    ];
    return(
      <div>
        <Table theadData={theadData}
          tbodyData={tbodyData} />
      </div>
    )
}

export default Friends;

import React from 'react'
import TableHeaderItem from './tableHead'
import TableRow from './tableRow'

const Table = ({theadData, tbodyData}) => {
  

  return (
    <table>
      <thead>
        <tr>
          {
            theadData.map(headerTitle => {
             return <TableHeaderItem
                      key={headerTitle}
                      item={headerTitle} />
            })
          }
        </tr>
      </thead>
      <tbody>
          {
              tbodyData.map(row => {
                console.log("rowID", row.id)
                return <TableRow
                        onRowClicked={() => console.log('user clicked on row #', row.id)}
                        key={row.id}
                        rowData={row.items} />
              })
          }

      </tbody>
    </table>
  )
}

export default Table

import TableCell from './tableCell'


const TableRow = ({ rowData, onRowClicked, onCellClick}) => {

  return(
      <tr
        onClick={onRowClicked} >
        {
          
          rowData.map(cell => {
            return (
              <TableCell
                key={cell}
                cellData={cell}

                onCellClicked={()=>console.log('user cliecked on cell name',cell)}
          
                />)})
        }
      </tr>
  )
}

export default TableRow;

const TableCell = ({   cellData, onCellClicked}) => {

  return (
      <td
        onClick={onCellClicked}>{cellData}</td>
  )
}

export default TableCell;

consttablecell=（{cellData，onCellClicked}）=>{
返回(
{cellData}
)
}
导出默认表单元；

通常，您会声明一个函数，该函数接受一些数据参数并返回一个函数，并将其用作单击处理程序。你可以把它声明在你评论的地方，然后作为道具传下去

这利用了闭包的概念，使每个回调对单击的行都是唯一的

例：

constfriends=（）=>{
//我的目标是在这里获取有关clickedcell的信息
const onRowClicked=rowData=>（）=>{
//对rowData做些什么
}
//此函数调用的返回值
//是行数据为闭包的单击处理程序
}

正如我正确理解的那样，您希望从另一个路由或App.js（其中组合了所有路由器）获取单元格点击单元格数据

使用Redux以全局状态存储

使用localStorage存储在浏览器的内存中

好友组件

const Friends = () => {


    // My goal is to get the the information about the clickedcell here


    const theadData = ["Name", "Email", "Date"];

    const tbodyData = [
        {
            id: "1",
            items: ["Peter", "peter@email.com", "01/01/2021"],
        },
        {
            id: "2",
            items: ["Foo", "foo@email.com", "12/24/2020"],
        },
        {
            id: "3",
            items: ["bar", "bar@email.com", "12/01/2020"],
        },
    ];

    const onFriendClicked = (e) => {
        console.log(e.target);
    }
    return(
      <div>
        <Table theadData={theadData}
          tbodyData={tbodyData}
          onTableClicked={onFriendClicked}
        />
      </div>
    )
}

export default Friends;

import TableCell from './tableCell'


const TableRow = ({ rowData, onRowClicked}) => {

  return(
      <tr
        onClick={onRowClicked} >
        {
          
          rowData.map(cell => {
            return (
              <TableCell
                key={cell}
                cellData={cell}

                onCellClicked={onRowClicked}
          
                />)})
        }
      </tr>
  )
}

export default TableRow;

const TableCell = ({   cellData, onCellClicked}) => {

  return (
      <td
        onClick={onCellClicked}>{cellData}</td>
  )
}

export default TableCell;

constfriends=（）=>{
//我的目标是在这里获取有关clickedcell的信息
const theadadata=[“姓名”、“电子邮件”、“日期”]；
常数tbodyData=[
{
id:“1”，
项目：[“彼得”peter@email.com", "01/01/2021"],
},
{
id:“2”，
项目：[“Foo”foo@email.com", "12/24/2020"],
},
{
id:“3”，
项目：[“条形图”bar@email.com", "12/01/2020"],
},
];
const onFriendClicked=（e）=>{
console.log（如target）；
}
返回(
)
}
导出默认好友；

表组件

import React from 'react'
import TableHeaderItem from './tableHead'
import TableRow from './tableRow'

const Table = ({theadData, tbodyData, onTableClicked}) => {
  

  return (
    <table>
      <thead>
        <tr>
          {
            theadData.map(headerTitle => {
             return <TableHeaderItem
                      key={headerTitle}
                      item={headerTitle} />
            })
          }
        </tr>
      </thead>
      <tbody>
          {
              tbodyData.map(row => {
                console.log("rowID", row.id)
                return <TableRow
                        onRowClicked={onTableClicked}
                        key={row.id}
                        rowData={row.items} />
              })
          }

      </tbody>
    </table>
  )
}

export default Table

从“React”导入React
从“./tableHead”导入TableHeaderItem
从“./TableRow”导入TableRow
常量表=（{theadData，tbodyData，onTableClicked}）=>{
返回(
{
theadata.map（headerTitle=>{
返回
})
}
{
tbodyData.map（行=>{
console.log（“rowID”，row.id）
返回
})
}
)
}
导出默认表

TableRow组件

const Friends = () => {


    // My goal is to get the the information about the clickedcell here


    const theadData = ["Name", "Email", "Date"];

    const tbodyData = [
        {
            id: "1",
            items: ["Peter", "peter@email.com", "01/01/2021"],
        },
        {
            id: "2",
            items: ["Foo", "foo@email.com", "12/24/2020"],
        },
        {
            id: "3",
            items: ["bar", "bar@email.com", "12/01/2020"],
        },
    ];

    const onFriendClicked = (e) => {
        console.log(e.target);
    }
    return(
      <div>
        <Table theadData={theadData}
          tbodyData={tbodyData}
          onTableClicked={onFriendClicked}
        />
      </div>
    )
}

export default Friends;

import TableCell from './tableCell'


const TableRow = ({ rowData, onRowClicked}) => {

  return(
      <tr
        onClick={onRowClicked} >
        {
          
          rowData.map(cell => {
            return (
              <TableCell
                key={cell}
                cellData={cell}

                onCellClicked={onRowClicked}
          
                />)})
        }
      </tr>
  )
}

export default TableRow;

const TableCell = ({   cellData, onCellClicked}) => {

  return (
      <td
        onClick={onCellClicked}>{cellData}</td>
  )
}

export default TableCell;

从“./TableCell”导入TableCell
const TableRow=（{rowData，onRowClicked}）=>{
返回(
{
rowData.map（单元格=>{
返回(
)})
}
)
}
导出默认表行；

TabelCell组件

const Friends = () => {


    // My goal is to get the the information about the clickedcell here


    const theadData = ["Name", "Email", "Date"];

    const tbodyData = [
        {
            id: "1",
            items: ["Peter", "peter@email.com", "01/01/2021"],
        },
        {
            id: "2",
            items: ["Foo", "foo@email.com", "12/24/2020"],
        },
        {
            id: "3",
            items: ["bar", "bar@email.com", "12/01/2020"],
        },
    ];

    const onFriendClicked = (e) => {
        console.log(e.target);
    }
    return(
      <div>
        <Table theadData={theadData}
          tbodyData={tbodyData}
          onTableClicked={onFriendClicked}
        />
      </div>
    )
}

export default Friends;

import TableCell from './tableCell'


const TableRow = ({ rowData, onRowClicked}) => {

  return(
      <tr
        onClick={onRowClicked} >
        {
          
          rowData.map(cell => {
            return (
              <TableCell
                key={cell}
                cellData={cell}

                onCellClicked={onRowClicked}
          
                />)})
        }
      </tr>
  )
}

export default TableRow;

const TableCell = ({   cellData, onCellClicked}) => {

  return (
      <td
        onClick={onCellClicked}>{cellData}</td>
  )
}

export default TableCell;

consttablecell=（{cellData，onCellClicked}）=>{
返回(
{cellData}
)
}
导出默认表单元；

有两种方法：第一种方法是使用道具。在这里，您必须使用4个步骤从TableCell组件向Friends组件发送单击信号。第二种方法是使用redux saga模块：。redux saga是react中的一个全局函数。您可以使用操作捕获任何组件中的单击事件。您需要在应用程序中使用哪种方式？理想情况下，我想我更喜欢将其作为表道具访问，然后从我的朋友组件或任何其他我将重用此表组件的组件访问它。这不是正确的方法吗？道具可以穿过父组件和子组件。我会为多步骤道具添加解决方案吗？如果可以，因为我似乎没有得到我想要的结果。我试着用打印的数据对每个单元格进行onClick。如果我理解正确，道具会更容易重用吗？谢谢！这很有效。我真不敢相信我把它当成了道具…阿泰姆，理想情况下我应该试着用钩子来做这个？你是什么意思？关于传奇？