Javascript 在onclick上传递html元素

我是

React

新手，我试图从onClick事件传递HTML元素，但没有得到预期的结果

代码如下：

import React, { Component } from 'react';

export class Header extends Component{
  isScrolledIntoView (e){
     console.log('html element is ',e)
   }

    render(){
       return(
            <div>
                <button onClick={this.isScrolledIntoView.()}>Click me</button>
            </div>
        );
     }
}

import React，{Component}来自'React'；
导出类头扩展组件{
isScrolledIntoView（e）{
log（'html元素为'，e）
}
render（）{
返回(
点击我
);
}
}

---

所需的输出是在控制台中获取按钮的HTML元素。

您需要捕获

e

（事件）的目标，而不是事件本身，如下所示：

import React, { Component } from 'react';

export class Header extends Component {

  isScrolledIntoView (e) {
     console.log('html element is ', e.target)
  }

  render() {
       return (
            <div>
                <button onClick={this.isScrolledIntoView.bind(this)}>Click me</button>
            </div>
       );
  }

}

import React，{Component}来自'React'；
导出类头扩展组件{
isScrolledIntoView（e）{
log（'html元素为'，e.target）
}
render（）{
返回(
点击我
);
}
}

这是一个演示链接：

---

希望有帮助

方法isScrolledIntoView（）绑定到类，而不是组件实例，因此当您在render方法中引用此.isScrolledIntoView（）时，它将返回undefined。常规React生命周期方法绑定到组件实例，但是对于您自己的自定义方法，您需要做一些工作，您可以将其放入构造函数中：

constructor(props) {
    this.isScrolledIntoView = this.isScrolledIntoView.bind(this);
}

也可以使用类属性自动绑定方法：

isScrolledIntoView = (e) => {
    // do stuff
}

---

您需要在代码中更改的两件事

1-您必须

绑定
您的
isScrolledIntoView
，它可以在您的构造函数中，或者执行此操作=>
单击我

2-您应该以e事件为目标，而不是只记录e。您应该

=>
console.log（'html元素为'，e.target）

对于新手来说，这本书读得很好
哇，它很管用！只是好奇这里的“e”和e.target是什么意思？我做了一个演示链接，也是为了以防万一：它返回触发事件的元素。每当你有一个HTML事件，你就有一个
事件被捕获到页面上。
事件
对象有一个target属性，它显示了目标html元素。@JackySapal也检查一下：