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

Stack Overflow用户

提问于 2019-05-23 08:55:54

回答 1查看 112关注 0票数 1

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

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

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

状态“data”包含填充表所需的信息。

javascript

reactjs

react-table

react-table-v6

人脸识别特惠活动

精准实时的人脸检测、分析、识别等服务，在线、离线满足多样需求，可应用于智慧零售、智慧社区、在线娱乐等多种应用场景

回答 1

Stack Overflow用户

发布于 2019-07-09 12:54:06

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

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

数据数组：

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);
}