如何在编辑后更新 react-bootstrap-table2 单元格值，以便不同列中的按钮组件具有它？

Question

我已经像这样设置了一个 react-bootstrap-table2（又名 react-bootstrap-table-next）table：

function buttonFormatter(cell, row) {
  return (
    <NominateButton
      row={ row }
      auctionId={ auctionId }
      teamId={ teamId }
    />
  );
}

const queue_columns = [{
  dataField: 'player.num',
  text: 'Player Num',
  editable: false
}, {
  dataField: 'player.name',
  text: 'Player',
  editable: false
}, {
  dataField: 'player.position',
  text: 'Position',
  editable: false
}, {
  dataField: 'initialBid',
  text: 'Initial Bid',
}, {
  text: 'Nominate',
  formatter: buttonFormatter,
  editable: false
}];

return (
  <BootstrapTable
    bootstrap4={ true }
    keyField='player.num'
    data={ this.state.data }
    columns={ queue_columns }
    cellEdit={ cellEditFactory({ mode: 'click',
                                 blurToSave: true }) }
    striped
    hover />
);

这是 table 的样子：

问题是在创建 table 时将行对象传递到 NominateButton 组件，因此当更新 initialBid 列时，更新值不会在行属性中更新为该行的 NominateButton。 NominateButton 在 GraphQL 变更中使用该 initialBid 值。

在一行中的 Initial Bid 单元格被编辑和更改后，我如何以某种方式使用更改后的值更新 NominateButton 的状态？

有没有什么方法可以在调用 cellEditFactory 时指定函数名称（使用 afterSaveCell 键）并将该函数名称作为属性传递给 NominateButton？

Answer 1

我通过创建一个函数来解决这个问题，该函数 return 在该行和列中编辑值并将该函数向下传递到按钮组件中：

  getInitialBid = (row) => {
    return this.state.data.find(r => r.rank === row.rank).initialBid;
  }

  render() {
    const { auctionId } = this.props;
    const { teamId } = this.props;

    const buttonFormatter = (cell, row) => {
      return (
        <NominateButton
          row={ row }
          auctionId={ auctionId }
          teamId={ teamId }
          getInitialBid={ this.getInitialBid }
        />
      );
    }

getInitialBid 函数在 table 的数据（在组件状态）和 returns 中找到来自 editable 的数据行（initialBid) 列。

NominateButton 组件将其传递给 NominateButtonMutator 组件：

class NominateButton extends Component {
  render() {
    const { row } = this.props;
    const { auctionId } = this.props;
    const { teamId } = this.props;
    const playerId = parseInt(this.props.row.player.id, 10);

    return (
      <NominateButtonMutator
        auctionId={ auctionId }
        teamId={ teamId }
        playerId={ playerId }
        row={ row }
        nominationsOpen={ data.team.nominationsOpen }
        subscribeToNominationsOpenChanges={ subscribeToMore }
        getInitialBid={ this.props.getInitialBid }
      />
    );
  }
}

并且 NominateButtonMutator 组件调用 getInitialBid 函数并将 return 值作为变量传递给 Apollo 突变：

const NominateButtonMutator = (props) => {
  const [submitBid] = useMutation(SUBMIT_BID_MUTATION);

  return (
    <div>
      <Button
        disabled={ !props.nominationsOpen }
        onClick={ () => {
          let initialBid = props.getInitialBid(props.row);
          submitBid({ variables: { auction_id: props.auctionId,
                                   team_id: props.teamId,
                                   player_id: props.playerId,
                                   bid_amount: parseInt(initialBid, 10) } });
        }}
        variant="outline-success">
        Nominate
      </Button>
    </div>
  );
};

如何在编辑后更新 react-bootstrap-table2 单元格值，以便不同列中的按钮组件具有它？

How do I update a react-bootstrap-table2 cell value after it's edited so a button component in a different column has it?

reactjs

react-bootstrap-table