我试图将一个函数传递给我的子组件.当用户单击每个子组件时,将调用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没有定义...

谢谢你的回答.

推荐答案

您需要将代理绑定到代理列表:

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

Reactjs相关问答推荐

ReferenceError:未在Redux组件中定义窗口

在一个blog函数中调用setState钩子

将动态元素中的输入数据传输到Reaction

useCallback()是否应该用于作为prop传递给子组件的函数,即使该组件包装在memo()中?

更改滑块标记的文本 colored颜色 ./Reaction/MUI 5

如何在REACTIVE js中动态添加或删除输入字段?

为什么React UseEffect挂钩在页面重新加载时运行

React 在第一次渲染时为 null

MERN,将动态列表中的元素插入数组

FabricJS反序列化问题

数据表格组件需要所有行都具有唯一的ID属性.或者,您可以使用getRowId属性.

使用reactrouterdom时显示"对象无效作为React子组件"错误

onChange in useEffect 的最佳实践

如何使用样式化函数为 TextField 的输入组件设置样式

Redux Toolkit 配置,是否适用于全栈应用程序?

如何在对话素材ui中设置边框半径?

用 jest 测试包裹在 redux 和 router 中的组件

为什么我在此代码段中看不到 useEffect for count = 1?

未捕获的错误:操作必须是使用 redux/toolkit 的普通对象

React.js 中的页面崩溃(读取未定义的属性)