Reactjs 单击按钮时获取react 表中每一行的属性

发布于08月28日

我有一个包含两列的Reaction表，如下所示:

{
      Header: 'Toe ID',
      id: 'toe_id',
      width: 250,
      accessor: 'toe_id',      

    }, {
      Header: 'Confirm',
      id: 'confirm',
      width: 130,
      Cell: (props) => <button type="button" onClick={toeSearchButtonEvent(props)}>
        Confirm Match
      </button>
     
    },

我正在try 将按钮的属性传递给下面的函数，以便在单击时获得行的属性:

function toeSearchButtonEvent(props) {
    console.log(props)        
    
  }

然而，当前的行为是所有行的所有属性都一次性打印到控制台，并且在单击时不会触发每行上按钮的onClick事件.How do I get the desired behavior of just getting the property of the row of the button I click?个

推荐答案

你可以像下面这样在Cell中呼唤toeSearchButtonEventprops

Just a side note, you should not call 100 directly. It will trigger 101 without a click event. You can wrap it with another anonymous function 102.

{
      Header: 'Toe ID',
      id: 'toe_id',
      width: 250,
      accessor: 'toe_id',      

    }, {
      Header: 'Confirm',
      id: 'confirm',
      width: 130,
      Cell: (props) => <button type="button" onClick={() => props.toeSearchButtonEvent(props)}>
        Confirm Match
      </button>
     
    },

然后使用toeSearchButtonEvent渲染Cell

<Cell {...props} toeSearchButtonEvent={toeSearchButtonEvent} />

一百零二

Reactjs相关问答推荐

是否可能有不同的加载器用于路径有查询参数和没有查询参数，或者在React Router 6中添加它们时有条件地跳过一个加载器？

如何通过浏览器路由在单独的.jsx文件中使用MUI抽屉？

如何在Reac.js中通过子组件和props 调用父组件函数？

Reaction Ploly：如何在多个子情节中共享zoom 状态

Reaction中的数据加载不一致

自定义变量默认、聚焦和填充时所需TextField中标签的星号 colored颜色

如何在react 中过滤数组的数组？

Reactjs：MUI5：MobileDateTimePicker API：如何自定义日历中的文本

如何将 DocuSign 控制台界面嵌入到 React 应用中

使用dayjs时如何在输入类型日期时间本地字段中设置默认值？

在复选框中react 检索选中的值

未捕获的类型错误：useSelector 不是函数

有没有办法根据 Rechart 中的 activeDot 更改值？

当用户输入相同信息时如何禁用更新

自动重新获取不起作用 - RTK 查询

如何在 React 中的 Material Ui 多选中设置默认值？

如何在 v6.4 中将 Auth0 提供程序与新的 createBrowsereRouter 一起使用？

如何实现两个 SVG 形状相互叠加的 XOR 操作？

仅在重新渲染后设置状态

Cypress 中的 process.env 空对象

实用课程推荐