时间戳

首页 > 解决方案 > 如何删除单元格中的按钮并将其替换为文本/数字？

javascript - 如何删除单元格中的按钮并将其替换为文本/数字？

问题描述

我正在准备一个反应表，并且有一列按钮。单击时，另一列会根据单击的行号进行更新。

我想删除单独的列以显示数据并让它更新其中包含按钮的列。因此，一旦单击，获得的数据将替换该特定行中的按钮。我该怎么做呢？

这是我目前拥有的表格格式。因此，当我单击该按钮时，“上个月的 API 调用”会相应更新。

{
  Header: 'Click to get API info',
  accessor: 'click-me-button',
  Cell: ({ row }) => (
    <button onClick={(e) => this.handleButtonClick(e, row)}>Click Me</button>
  )
},{
  Header: 'API calls in last month',
  accessor: 'lastapicalls',
  Cell: row => <div style={{ textAlign: "center" }}>{row.value}</div>
}

我想删除“上个月的 API 调用”列，并使用通过单击按钮获得的信息更新“click-me-button”列（通过用获得的数据替换单击的按钮）

目前获取数据的代码如下

handleButtonClick(e, rowInfo) {
  axios({   
    method: 'get',
    url: 'http://localhost:8080/info/search/lastapicalls/'+rowInfo.tenant_domain, 
    auth: {
      username: this.state.user,
      password: this.state.pass,
    }
  })
  .then(response => this.setState({ retrievedapicalls: response.data },
    () => {
      this.setState(oldState => {
        let data = oldState.data.slice();
        let copy = Object.assign({}, data[rowInfo._index]);
        copy.lastapicalls = this.state.retrievedapicalls;
        copy.selected = true;
        data[rowInfo._index] = copy;
        return {
          data
        };
      }
    );
  }))
}

状态“数据”包含填写表格所需的信息。

标签： javascriptreactjsreact-tablereact-table-v6

解决方案

在您的数据数组中，您可以添加一个isClicked默认初始化为 false 的属性。然后，一旦单击它，在您的handleButtonClick函数中，您可以将属性设置isClicked为 true。

要显示单元格内容，您可以对isClicked属性设置条件。如果是true，则显示 API 上次调用信息。否则，您将显示该按钮。

数据数组：

const data = [
  { "click-me-button": "hi", lastapicalls: "now", isClicked: false },
  { "click-me-button": "hi", lastapicalls: "now", isClicked: false },
  { "click-me-button": "hi", lastapicalls: "now", isClicked: false }
];

列定义：

render() {
  return (
    <div>
      <ReactTable
        data={this.state.data}
        columns={[
          {
            Header: "Click to get API info",
            accessor: "click-me-button",
            Cell: row => this.renderApiInfo(row)
          }
        ]}
        defaultPageSize={10}
        className="-striped -highlight"
      />
    </div>
  );
}

// Toggle content on idClicked property
renderApiInfo(row) {
  if (row.original.isClicked) {
      return (
        <div style={{ textAlign: "center" }}>{row.original.lastapicalls}</div>
      );
  } else {
    return (
      <button onClick={e => this.handleButtonClick(e, row)}>Click Me</button>
    );
  }
}

并且，单击该按钮应更新存储在您的状态中的数据对象：

handleButtonClick(e, rowInfo) {
  // In your then() scope after sending your axios request
  const nextState = { ...this.state };
  nextState.data[rowInfo.index].isClicked = true;
  this.setState(nextState);
}

推荐阅读