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

【问题标题】：How can I delete a button in a cell and replace it with a text/number?如何删除单元格中的按钮并将其替换为文本/数字？
【发布时间】：2019-05-23 08:55:54
【问题描述】：

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

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

这是我目前拥有的表格格式。因此，当我单击该按钮时，“上个月的 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
        };
      }
    );
  }))
}

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

【问题讨论】：

删除列是什么意思？从表格中删除整列，还是只清空该行单元格的内容？
整列。现在我有两列。每行一个带有按钮，一个空的显示从按钮获得的信息（一旦单击）。我想删除空的并在按钮列本身上显示信息（用获得的信息替换按钮）。非常感谢

标签： javascript reactjs react-table react-table-v6

【解决方案1】：

在您的数据数组中，您可以添加一个属性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);
}

【讨论】：