Javascript 如何使用react引导表为列放置事件

我正在我的react应用程序中使用表，我正在使用它，我正在成功地渲染表

请检查编辑的部分

• 我在有条件地呈现表数据时面临问题
• 我有一个列名为

  Availability

  ，因此它是true和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"
/>;

这是我的函数

 const columnFormatter = (cell, row, rowIndex, formatExtraData) => {
  if (row && row.availability) {
    return <a href="#">check this out</a>;
  } else {
    return row.availability;
  }
};

const columnFormatter=（单元格、行、行索引、formatExtraData）=>{
if（行和行可用性）{
返回；
}否则{
返回行。可用性；
}
};

现在在if条件下，我试图将

事件

onClick

，但我无法实现这一点

但这是对每一行的点击，我想点击特定的列到特定的单元格

---

添加一个

onClick

处理程序非常简单：

<a
    href="#"
    onClick={() => {
      console.log("clicked row", rowIndex);
    }}>
    check this out
</a>

---

我想您希望根据可用性有条件地呈现图标 基于此,

• 如果可用性为true，则我想显示

• 如果可用性为false，则

所以试着这样做

const columnFormatter = (cell, row, rowIndex, formatExtraData) => {
  if (row && row.availability) {
    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">
  <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>
  } else {
    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">
  <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>
  }
};

const columnFormatter=（单元格、行、行索引、formatExtraData）=>{
if（行和行可用性）{
返回
}否则{
返回
}
};

---

你想实现什么目标？将

onClick

处理程序添加到

元素非常有效。我尝试过，但不起作用，能否显示一个有效的代码

const columnFormatter = (cell, row, rowIndex, formatExtraData) => {
  if (row && row.availability) {
    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">
  <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>
  } else {
    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">
  <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>
  }
};