在链接

Question

我有这个奇怪的事情，我有这个简单的组件

import React, {Component} from 'react';
const Logo = ({onClick}) => {
return (

    <a name="home" onClick={onClick} className="logo">

        <span className="logo-mini"></span>



    </a>

);
};


export default Logo;

onClick事件假设要获取链接上的click事件以获取属性名称，但是当我在console.log event.target输出<span class="logo-lg"></span>时，我得到的是未定义的

在root compenent中我的render方法调用<Logo onClick={this.handleClick}/> handleClick方法

    handleClick(){
    let to = event.target.name;
    console.log(event.target);
    }

Answer 1

您可以通过parentElement方法链接getAttribute()来访问所需的属性。 请在handleClick方法中尝试此方法

的 console.log(event.target.parentElement.getAttribute('name'));

此处更多信息：
https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute https://developer.mozilla.org/en/docs/Web/API/Node/parentElement

或者，您可以使用：
console.log(event.target.getAttribute('name')); 但这需要您将name属性放在span元素上。

另外，如果gist被删除，这里有一个完整的工作代码：

class Header extends React.Component { 
  handleClick(event) {
    console.log(event.target.parentElement.getAttribute('name'));
  }
  render() {
    return (
      <Logo onClick={this.handleClick}/>
    );
  }
}

const Logo = ({onClick}) => {
  return (
    <a name="home" onClick={onClick} className="logo">
        <span className="logo-mini">Logo</span>
    </a>
  );
};

ReactDOM.render(<Header/>, document.getElementById('app'));

指向codepen的链接：http://codepen.io/PiotrBerebecki/pen/LRRYRq

Answer 2

您需要将此绑定到函数调用。

 <Logo onClick={this.handleClick.bind(this)}/>