javascript - 在链接上 react 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 事件应该获取链接上的点击事件以获取属性名称，但当我控制台时，我得到的是未定义的。记录 event.target输出是 <span class="logo-lg"></span>

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

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

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