React:将函数传递给子组件

IT技术 javascript reactjs
2021-04-03 19:35:18

我尝试将一个函数传递给我的子组件。对于每个子组件,当用户单击它们时,将调用 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个回答

您需要将 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
如果有 8 个函数怎么办
2021-05-28 19:35:18
@ZhenyangHua 你如何用这种方式传递事件(参数)?
2021-05-29 19:35:18
您也可以使用onClick={() => this.handleClick()}.
2021-06-06 19:35:18
然后你单独传递每一个
2021-06-07 19:35:18
@ZhenyangHua 实际上这是一种更好的方法,因此您不再需要使用bind了。
2021-06-15 19:35:18