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

希望它有所帮助！

Answer 2

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

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

或者您可以使用类属性自动绑定方法：

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

Answer 3

您需要在代码中更改2件事。

1-您必须bind isScrolledIntoView <button onClick={this.isScrolledIntoView.bind(this)}>Click me</button>，它可能在您的构造函数中，或者在这个=>＆gt; console.log('html element is ', e.target)

2-您应该定位您的电子事件，而不是仅记录您应该的日期 =＆GT; def inner_function(arr): scratch = np.zeros(arr.shape) do_sth(arr, scratch) # modifies scratch, doesn't modify arr do_sth_else(arr, scratch) # as above arr[...] = scratch # here's the broadcast assignment def outer_function(): arr = np.zeros((height, width)) for _ in range(its): inner_function(arr) # do other things...

react

中的新手很好读

Reactjs在onclick上传递html元素

3 个答案: