javascript - Reactjs 在 onclick 上传递 html 元素

Question

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

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

Answer 1

您需要捕获 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>
       );
  }

}

这是一个演示链接:https://codesandbox.io/s/y8xXqopM7

希望对您有所帮助!