我尝试将一个函数传递给我的子组件。对于每个子组件,当用户单击它们时,将调用onclick函数。此onclick函数将写入父组件。
父组件:
class AgentsList extends React.Component {
constructor(props) {
super(props);
}
handleClick(e) {
e.preventDefault();
console.log(this.props);
}
render() {
const { agents } = this.props;
...
var agentsNodes = agents.map(function(agent, i) {
if(agent.id_intervention == "") {
return (
<Agent agent={agent} key={i} ticket={t} id={row_names} onClick={this.handleClick.bind(this)} />
);
}
});
return (
<div id="agents">
<div className="agents-title">
<h3>Title</h3>
</div>
{agentsNodes}
</div>
);
}
}
子组件:
class Agent extends React.Component {
constructor(props) {
super(props);
}
render() {
const { agent, t } = this.props;
return (
<Link to='/' onClick={this.props.onClick}>
...
</Link>
);
}
}
在这一行:<Agent agent={agent} key={i} ticket={t} id={row_names} onClick={this.handleClick.bind(this)} />
它说没有定义handleClick ... 我怎么能解决这个问题?
感谢您的回答。
答案 0 :(得分:27)
您需要将代理绑定到AgentsList: 这是你的代码的一个快速示例,我不得不摆脱一些东西,但你明白了:
http://jsfiddle.net/vhuumox0/19/
var agentsNodes = agents.map(function(agent, i) {
if(agent.id_intervention == "") {
return (
<Agent agent={agent} key={i} ticket={t} id={row_names} onClick={this.handleClick.bind(this)} />
);
}
}, this); // here