如何将函数作为属性传递给 React 组件？

Question

为了弄清楚我在（未回答的）问题中解释的问题，我试图将 returns 单元格值传递给按钮组件的函数：

class NominationQueueBootstrapTable extends Component {

...

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

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

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

...

我的 NominateButton 组件 returns 另一个调用修改器的按钮包装器组件：

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 (
      <Query
        query={TEAM_NOMINATIONS_OPEN_QUERY}
        variables={{ team_id: teamId }}>
        {({ data, loading, error, subscribeToMore }) => {
          if (loading) return <Loading />;
          if (error) return <Error error={error} />;
          return (
            <NominateButtonMutator
              auctionId={ auctionId }
              teamId={ teamId }
              playerId={ playerId }
              row={ row }
              nominationsOpen={ data.team.nominationsOpen }
              subscribeToNominationsOpenChanges={ subscribeToMore }
              getInitialBid={ this.props.getInitialBid }
            />
          );
        }}
      </Query>
    );
  }
}

并且因为我需要在按下按钮时调用修改器，所以我的 onClick 函数首先调用作为属性传入的 getInitialBid 函数，然后调用修改器：

class NominateButtonMutator extends Component {

...

  handleButtonPressed = (submitBid) => {
    this.setState({bidAmount: this.props.getInitialBid(this.props.row)});
    submitBid();
  };

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

    return (
      <Mutation
        mutation={SUBMIT_BID_MUTATION}
        variables={{
          auction_id: auctionId,
          team_id: teamId,
          player_id: playerId,
          bid_amount: this.state.bidAmount
        }}
      >
        {(submitBid, { loading, error }) => (
          <div>
            <Error error={error} />
            <Button
              disabled={ loading || !nominationsOpen }
              onClick={() => this.handleButtonPressed(submitBid) }
              variant="outline-success">
              Nominate
            </Button>
          </div>
        )}
      </Mutation>
    );
  }
}

（onClick= 代码更新自 azium 的评论。）

当我运行这个时，我得到：

"TypeError: this.props.getInitialBid is not a function"

这是可行的策略吗？为什么 this.props.getInitialBid 不是函数？

Answer 1

您使用的是旧的 function 语法，因此 this 未正确绑定。

变化：

function buttonFormatter(cell, row) {
  return (
    <NominateButton
      row={ row }
      auctionId={ auctionId }
      teamId={ teamId }
      // scoped to your local function not your class
      getInitialBid={ this.getInitialBid } 
    />
  );
}

到

const buttonFormatter = (cell, row) => {
  return (
    <NominateButton
      row={ row }
      auctionId={ auctionId }
      teamId={ teamId }
      // this is scoped "lexically" aka to your class
      getInitialBid={ this.getInitialBid }
    />
  );
}

如何将函数作为属性传递给 React 组件？

How do I pass a function as a property to a React component?

javascript

reactjs

react-props

react-component

如何将函数作为 属性 传递给 React 组件？

How do I pass a function as a property to a React component?

javascript

reactjs

react-props

react-component

如何将函数作为属性传递给 React 组件？