React: передать функцию дочернему компоненту

Я пытаюсь передать функцию моему дочернему компоненту. Для каждого дочернего компонента, когда пользователь нажимает на них, функция 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 не определен... Как я могу решить эту проблему?

Спасибо за ваш ответ.

Ответы

Ответ 1

Вам нужно связать агентов с агентом: Вот краткий пример с вашим кодом, я должен был избавиться от некоторых вещей, но вы поняли:

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