Как мне обновить значение ячейки реагировать-начальной загрузки-таблицы2 после того, как оно будет отредактировано, чтобы оно было у компонента кнопки в другом столбце?

Question

Я настроил таблицу response-bootstrap-table2 (она же реагирует-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 использует это значение initialBid в мутации GraphQL.

После того, как ячейка Initial Bid в строке отредактирована и изменена, как мне каким-то образом обновить состояние NominateButton с этим измененным значением?

Есть ли какой-либо способ указать имя функции в вызове cellEditFactory (с ключом afterSaveCell) и передать это имя функции в качестве свойства в NominateButton?

Answer 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 и передает возвращаемое значение как переменную мутации 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>
  );
};