我尝试将函数传递给子组件。当用户单击每个子组件时,将调用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)} />
<Agent agent={agent} key={i} ticket={t} id={row_names} onClick={this.handleClick.bind(this)} />
它说没有定义handleClick …如何解决这个问题?
感谢您的回答。
您需要将Agents绑定到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