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

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

IT技术 reactjs react-bootstrap-table

2021-05-11 07:47:25

我已经设置了一个 react-bootstrap-table2（又名 react-bootstrap-table-next）表，如下所示：

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

这是表的样子：

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

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

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

1个回答

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

  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函数在表数据中（在组件的状态下）查找行，并从可编辑 ( 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函数，并将返回值作为一个变量到阿波罗突变：

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

其它你可能感兴趣的问题

上一篇日期范围验证 - 开始日期不能与 jquense / yup 中的结束日期相同下一篇如何处理Promise链中的多个错误？