javascript - OnClick 通过映射未触及父级

Question

我试图通过映射让 onClick 在 React 中工作。当我在父级别和子级别上执行 console.log() 时，我只看到我达到了子级别。我在父级别的 onclick 是否不正确？

家长级别

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

child 级别

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

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

为什么Parent不打印出来？

Answer 1

在您的父级别上，您将属性 onClick 传递给 Channels 组件。但您从未在 Channels 组件上调用它。

如果您想调用从父级传递到Channels的onClick，那么您的组件应如下所示:

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

现在它应该调用父级onClick。

如果您想调用 Channels 组件中定义的 onClick ，那么您的组件应如下所示:

class Channels extends React.Component {
    onClick() {
        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 {
    onClick(event) {
        this.props.onClick(event);
        console.log('Child');
    }

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