如何使用react-bootstrap-table为列放置事件

Question

我正在我的 React 应用程序中使用表，我为此使用React bootstrap table2 ，我成功渲染了该表。

请检查已编辑的部分

• 我在有条件地渲染表数据时遇到问题

• 我有一列命名为Availabilitytrue 和 false，我想做的是，当它为 true 时显示刻度线（右），如果 false 显示交叉一，我可以插入新列，但无法更新现有的。

我正在做什么插入新列

let c = {

  dataField: "Class",

  text: "Class",

  editable: false,

  formatter: () => {

    return 12;

  },

};

d.push(c);

setColumnData(d);

上面d是列数据

但我被困在这里更新现有的

我的数据

{

  column_data: [

    {

      dataField: "first_name",

      text: "Name",

      sort: true,

    },

    {

      dataField: "last_name",

      text: "Last Name",

      sort: false,

    },

    {

      dataField: "availability",

      text: "Available",

      sort: true,

    },

  ],

  tableData: [

    {

      first_name: "simon",

      last_name: "chaz",

      availability: true,

    },

    {

      first_name: "steve",

      last_name: "smith",

      availability: false,

    },

    {

      first_name: "michel",

      last_name: "gread",

      availability: true,

    },

    {

      first_name: "rimon",

      last_name: "class",

      availability: false,

    },

  ],

}

这就是我渲染表格的方式：

<BootstrapTable

  bootstrap4

  keyField="certificate_Name"

  data={data.tableData}

  columns={data.column_data}

  wrapperClasses="table-responsive"

  classes="table-hover table-bordered"

  headerClasses="header-class"

/>;

• 如果Availability是真的那么我想展示<i className="ri-checkbox-circle-line"></i>。

• 如果Availability为假则<i class="ri-close-line"></i>

我正在尝试在特定条件下显示我的细胞数据

这是我的代码沙箱

Answer 1

添加onClick处理程序非常简单：<a&nbsp; &nbsp; href="#"&nbsp; &nbsp; onClick={() => {&nbsp; &nbsp; &nbsp; console.log("clicked row", rowIndex);&nbsp; &nbsp; }}>&nbsp; &nbsp; check this out</a>

Answer 2

我想您想根据此基础上的可用性有条件地渲染图标如果“可用性”为真，那么我想显示&nbsp;<i className="ri-checkbox-circle-line"></i>。如果可用性为 false 那么<i class="ri-close-line"></i>所以尝试这样做const columnFormatter = (cell, row, rowIndex, formatExtraData) => {&nbsp; if (row && row.availability) {&nbsp; &nbsp; return <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-check-circle-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">&nbsp; <path fill-rule="evenodd" d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/></svg>&nbsp; } else {&nbsp; &nbsp; return <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-x-circle-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">&nbsp; <path fill-rule="evenodd" d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/></svg>&nbsp; }};https://codesandbox.io/s/charming-bird-e389g?file=/src/App.js:228-1118