React.js在onclick上传递html元素

Question

I'm new to React and I'm trying to pass the HTML element from an onClick event, but I'm not getting the expected result.

Here is the code:

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

The desired output would be to get the button's HTML element in the console.

Answer 1

You need to capture the target of the e (event) instead of the event itself, like this:

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

}

Here is a demo link: https://codesandbox.io/s/y8xXqopM7

Hope it helps!

Answer 2

The method isScrolledIntoView() is bound to the class, not the component instance, so when you refer to this.isScrolledIntoView() in your render method it will return undefined. Regular React lifecycle methods are bound to the component instance, but for your own custom methods you need to do a little work, you can put it in the constructor:

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

Or you can use class properties to auto-bind the method:

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

Answer 3

2 things you need to change in your code.

1- You have to bind your isScrolledIntoView , and it could be inside your constructor, or doin' this => <button onClick={this.isScrolledIntoView.bind(this)}>Click me</button>

2- You should target your e event instead of only log e you should
=> console.log('html element is ', e.target)

Nice reading for novices in react