在链接上反应 onClick 事件

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

在根组件中我的渲染方法调用<Logo onClick={this.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 元素上。

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

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