简体   繁体   English

如何将列的内容传递给 react-bootstrap-table2 中的 dummyField

[英]How to pass the content of your columns to a dummyField in react-bootstrap-table2

I'm trying to pass the value of my columns datafield to my buttons in react-bootstrap-table2 dummyField.我正在尝试将列数据字段的值传递给 react-bootstrap-table2 dummyField 中的按钮。 And I don't quite know how to do it.而且我完全不知道该怎么做。 this is my columns datafield.这是我的列数据字段。

const columns = [
    {
      dataField: "firstName",
      text: "First Name",
    },
    {
      dataField: "middleName",
      text: "Middle Name",
    },
    {
      dataField: "lastName",
      text: "Last Name",
    },
    {
      dataField: "sex",
      text: "Sex",
      sort: true,
    },
    {
      dataField: "rootChapter",
      text: "Root Chapter",
    },
    {
      dataField: "municipalCouncil.name",
      text: "Council",
      sort: true,
    },
    {
      dataField: "batchName",
      text: "Batch Name",
      sort: true,
    },
    {
      dataField: "alias",
      text: "Alias",
    },
    {
      dataField: "actions",
      text: "Actions",
      isDummyField: true,
      formatter: (cell, row) => <MemberButtons member={columns} id={row._id} />, // Overhere is the problem
    },
  ];

I'm doing this because of the modal.我这样做是因为模态。 I'm a beginner to React.js and specially to react-bootstrap-table2.我是 React.js 的初学者,特别是 react-bootstrap-table2。

1st approach : Use state to pass it to your component第一种方法:使用状态将其传递给您的组件

export default class yourClassName extends Component{
constructor(props){
super(props);
this.state = {
columns: [ your array data here ]
}
render(){
<yourTable/>
}
}

2nd approach : you can use State Hook https://reactjs.org/docs/hooks-state.html第二种方法:您可以使用 State Hook https://reactjs.org/docs/hooks-state.html

Both approaches will yield same results, you can pick the one that suits your coding style.两种方法都会产生相同的结果,您可以选择适合您的编码风格的一种。

So it works by doing this所以它通过这样做来工作

{
      dataField: "actions",
      text: "Actions",
      isDummyField: true,
      formatter: (cell, row) => <MemberButtons values={row} id={row._id} />, // By passing row variable to values I got all the contents of my datafields
    },

Thank you for those who tried to help me.. If you found a better way to do this please dont hesitate to post it here.. Thanks :)感谢那些试图帮助我的人。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 在 react-bootstrap-table2 中添加带有图标的编辑按钮 - Adding Edit button with icon in a react-bootstrap-table2 在UI中显示react-bootstrap-table2自定义验证器错误消息 - react-bootstrap-table2 custom validator error message appears trimmed in the UI 提供给“DataProvider”的类型为“number”的无效道具“data”,应为“array”。 React-bootstrap-table2, Firebase 实时数据库 - Invalid prop `data` of type `number` supplied to `DataProvider`, expected `array`. React-bootstrap-table2, Firebase Realtime Database 如何使用反应使引导表列可调整大小 - How to make bootstrap table columns resizable using react 如何将字符串列表格式化为反应引导表 2 的列,以使数据不会从实际列中流出 - How to format a list of string into columns of react bootstrap table 2 such that data doesn't flows out of actual columns 将动态内容传递给反应表子组件 - Pass dynamic content to the react table sub component 如何将参数传递给bootstrap的popover content函数 - how to pass parameters to popover content function of bootstrap react-bootstrap-table设置表列总计状态 - react-bootstrap-table set table columns total in state React - 如何将数据传递到 Modal(引导程序) - React - how to pass data into Modal (bootstrap) 表内容的换行符(引导程序) - newline to table content (bootstrap)
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM