Question

我试图通过映射使onClick在React中工作。当我在父级别和子级别上执行console.log（）时，我只会看到我触及子级别。我在父级的onclick错误吗？

父级

export default ({}) => (
   <div>
       {channels.map(c => (
          <Channels
             onClick={async () => {
                console.log('Parent');
             }}
          />
       ))}
   </div>
)

儿童级别

class Channels extends React.Component {
    onClick() {
        console.log('Child');
    }

    render () {
        return (
           <Link onClick={this.onclick()} to={...}>
              <NewMessage># {channel.name}</NewMessage>
           </Link>
        );
    }
}

为什么父母不打印出来？

Answer 1

在您的父级上，您正在将道具onClick传递到Channels组件。但您从未在Channels组件上调用它。

如果您要调用从父级传递到onClick的{{1}}，则您的组件应如下所示：

Channels

现在它应该调用父级class Channels extends React.Component { render () { return ( <Link onClick={this.props.onClick} to={...}> <NewMessage># {channel.name}</NewMessage> </Link> ); } }。

如果您要调用onClick组件中定义的onClick，则您的组件应如下所示：

Channels

请注意，您将class Channels extends React.Component { onClick() { console.log('Child'); } render () { return ( <Link onClick={this.onClick} to={...}> <NewMessage># {channel.name}</NewMessage> </Link> ); } }更改为onClick={this.onclick()}是因为Javascript是区分大小写的语言，并且也删除了括号，因为那不是附加处理程序的正确方法。

如果您要同时调用父级和子级的onClick={this.onClick}，则组件应如下所示：

onClick

Answer 2

可以通过孩子中的onClick从道具中访问父母的this.props.onClick。此外，您还想引用函数，而不是<Link >组件中的函数结果。看起来像：onClick={this.onclick}而不是onClick={this.onclick()}

父级不打印，因为在子级组件中未引用父级。子组件正在onClick上创建，并通过this.onClick使用，而父组件的点击位于this.props.onClick

class Channels extends React.Component {
  onClick() {
    const { onClick } = this.props
    onClick() // parent
    console.log('Child');
  }

  render () {
    return (
       <Link onClick={this.onclick} to={...}>
          <NewMessage># {channel.name}</NewMessage>
       </Link>
    );
  }
}

OnClick通过映射未达到父级

2 个答案: