[英]How do I pass a function as a property to a React component?
In an effort to figure out the problem I explain in my (unanswered) question "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 单元格值,以便不同列中的按钮组件具有它?” , I attempted to pass a function that returns the cell value into the button component: ,我试图传递一个 function ,它将单元格值返回到按钮组件中:
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 }
/>
);
}
...
My NominateButton
component returns another button wrapper component that calls a mutator:我的NominateButton
组件返回另一个调用 mutator 的按钮包装器组件:
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>
);
}
}
And because I need to invoke the mutator when the button is pressed, my onClick function first calls the getInitialBid function passed in as a property, and then invokes the mutator:因为我需要在按下按钮时调用 mutator,所以我的 onClick function 首先调用 getInitialBid function 作为属性,然后调用mutator:
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>
);
}
}
(The onClick=
code was updated from azium 's comment.) ( onClick=
代码是从azium的评论中更新的。)
When I run this, I get:当我运行它时,我得到:
"TypeError: this.props.getInitialBid is not a function" “TypeError:this.props.getInitialBid 不是函数”
Is this a workable strategy?这是一个可行的策略吗? Why isn't this.props.getInitialBid a function?为什么 this.props.getInitialBid 不是 function?
You are using the old function
syntax, so this
is not bound correctly.您使用的是旧的function
语法, this
未正确绑定。
change:改变:
function buttonFormatter(cell, row) {
return (
<NominateButton
row={ row }
auctionId={ auctionId }
teamId={ teamId }
// scoped to your local function not your class
getInitialBid={ this.getInitialBid }
/>
);
}
to至
const buttonFormatter = (cell, row) => {
return (
<NominateButton
row={ row }
auctionId={ auctionId }
teamId={ teamId }
// this is scoped "lexically" aka to your class
getInitialBid={ this.getInitialBid }
/>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.