在鏈接上反應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事件假設要獲取鏈接上的click事件以獲取屬性名稱，但是當我在console.log中時，我得到的是未定義的event.target out out是<span class="logo-lg"></span>

在根權限我的渲染方法調用<Logo onClick={this.handleClick}/> handleClick方法

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

Answer 1

您可以通過使用getAttribute()方法鏈接parentElement來訪問所需的屬性。 在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')); 但這需要您在span元素上添加name屬性。

此外，如果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)}/>