javascript - React 中的 OnClick 事件

Question

我有一个非常奇怪的问题。

我在 react 中有以下链接

<a onClick={this.props.onClick} name={this.props.name} style={{cursor: 'pointer', display: 'block', textAlign: 'center'}}>
       <span className="regHeaderText">{this.props.value}</span>
       <FontAwesome name={this.props.icon} className="faIcon"/>
</a>

它看起来像:

但问题是，如果我单击文本NEXT或 Font Awesome 图标，我会得到未定义作为链接名称。

只有当我单击文本左侧的某个位置NEXT时，才会在这个黄色框中获得正确的名称。

如果我创建链接而不是跨度，例如:

<a onClick={this.props.onClick} name={this.props.name} style={{cursor: 'pointer', display: 'block', textAlign: 'center'}}>
     <a onClick={this.props.onClick} name={this.props.name} className="regHeaderText">{this.props.value}</a>
     <a onClick={this.props.onClick} name={this.props.name}><FontAwesome name={this.props.icon} className="faIcon"/></a>
</a>

然后就可以了，但是有没有什么解决方案可以在不创建链接内链接的情况下实现呢？

编辑

onClick: function (event) {
    event.preventDefault();
    var field = event.target.name;
    alert("The name is : " + field);
}

Answer 1

您可能在 onClick 处理程序中使用 e.target。当您单击跨度时，事件会冒泡到链接上的处理程序，但目标将是跨度而不是 a。

要避免此问题，您可以使用链接名称创建绑定(bind)的 onClick

<a onClick={this.props.onClick.bind(this, this.props.name)}

onClick 方法的第一个参数是名称，第二个参数是事件。