React中的OnClick事件

Question

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

我在反应中有以下链接

<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 或字体真棒图标，我会将未定义作为链接的名称。

只有当我点击 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。

为避免这种情况，您可以使用链接名称

创建绑定onClick

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

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