编辑了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?

问题描述

我已经建立了一个react-bootstrap-table2(又名react-bootstrap-table-next)表，

I've setup a react-bootstrap-table2 (aka react-bootstrap-table-next) table like this:

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值.

The problem is that the row object is passed into the NominateButton component when the table is created, so when the initialBid column is updated that updated value is not updated in the row property to the NominateButton for that row. The NominateButton uses that initialBid value in a GraphQL mutation.

在一行中的初始出价"单元格被编辑并更改后，如何以更改后的值更新NominateButton的状态?

After an Initial Bid cell in a row is edited and changed, how do I somehow update the state of the NominateButton with that changed value?

是否有某种方法可以在对cellEditFactory的调用中指定一个函数名(使用afterSaveCell键)，然后将该函数名作为属性传递给NominateButton?

Is there some way to specify a function name in the call to cellEditFactory (with the afterSaveCell key) and pass that function name as a property into NominateButton?

推荐答案

我解决了这个问题，方法是创建一个函数，该函数返回该行和该列中的已编辑值，并将该函数向下传递给按钮组件:

I solved the problem by creating a function that returns the edited value in that row and column and passing the function down into the button component:

  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)列中返回数据.

The getInitialBid function finds the row in the table's data (in the component's state) and returns the data from the editable (initialBid) column.

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

The NominateButton component passes that along to a NominateButtonMutator component:

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突变:

And the NominateButtonMutator component calls the getInitialBid function and passes the return value as a variable to an Apollo mutation:

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单元格值后如何更新它，以便其他列中的按钮组件具有它?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！