Javascript OnClick-through映射未命中父级

我试图通过映射让onClick在React中工作。当我在父级和子级执行console.log（）时，我只看到我在子级执行操作。我在父级的onclick是否不正确

父级

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

导出默认值（{}）=>(
{channels.map（c=>(
{
console.log（'Parent'）；
}}
/>
))}
)

子级

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

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

类通道扩展React.Component{
onClick（）{
console.log（'Child'）；
}
渲染（）{
返回(
#{channel.name}
);
}
}

---

为什么家长不打印出来？

家长的

onClick

可以通过孩子的

this.props.onClick

从道具访问。您还希望引用函数，而不是

组件中函数的结果。这看起来像：

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>
    );
  }
}

类通道扩展React.Component{
onClick（）{
const{onClick}=this.props
onClick（）//父
console.log（'Child'）；
}
渲染（）{
返回(
#{channel.name}
);
}
}

在您的父级，您正在将一个道具

onClick

传递给

频道

组件。但您从未在

频道上调用过该组件

如果要调用从父级传递到通道的
onClick
，则组件应如下所示：

class Channels extends React.Component {
    render () {
        return (
           <Link onClick={this.props.onClick} to={...}>
              <NewMessage># {channel.name}</NewMessage>
           </Link>
        );
    }
}

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

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

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

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

注意，您使用了
onClick={this.onClick（）}
我将其更改为
onClick={this.onClick}
，因为Javascript是区分大小写的语言，并且删除了括号，因为这不是附加处理程序的正确方法

如果要同时调用子级和父级的
onClick
，则组件应如下所示：

class Channels extends React.Component {
    render () {
        return (
           <Link onClick={this.props.onClick} to={...}>
              <NewMessage># {channel.name}</NewMessage>
           </Link>
        );
    }
}

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

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

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

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

类通道扩展React.Component{
onClick（事件）{
this.props.onClick（事件）；
console.log（'Child'）；
}
渲染（）{
返回(
#{channel.name}
);
}
}