<div className='btn' onClick={(e) =>
     console.log(e.currentTarget.attributes['tag'].value)}
     tag='bold'>
    <i className='fa fa-bold' />
</div>

所以e.currentTarget.attributes['标签']。价值对我有用

事件。target为您提供本机DOM节点，然后您需要使用常规DOM api来访问属性。下面是关于如何做到这一点的文档:使用数据属性。

你可以使用event.target.dataset.tag或event.target.getAttribute('data-tag');两种方法都可以。

您可以像这样访问数据属性

event.target.dataset.tag

我认为建议在需要使用它的地方绑定所有方法。setState方法，该方法在React中定义。组件类，在构造函数中，你的构造函数应该是这样的

    constructor() {
        super()
        //This binding removeTag is necessary to make `this` work in the callback
        this.removeTag = this.removeTag.bind(this)
    }
    removeTag(event){
        console.log(event.target)
        //use Object destructuring to fetch all element values''
        const {style, dataset} = event.target
        console.log(style)
        console.log(dataset.tag)
    }
   render() {
   ...
      <a data-tag={i} style={showStyle} onClick={this.removeTag.bind(null, i)}></a>
   ...},

有关对象解构的更多参考 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring

尝试而不是分配dom属性(这是缓慢的)，只是将你的值作为参数传递给实际创建你的处理程序的函数:

render: function() {
...
<a style={showStyle} onClick={this.removeTag(i)}></a>
...
removeTag = (customAttribute) => (event) => {
    this.setState({inputVal: customAttribute});
}

用不同于你要求的方式帮助你达到预期的结果:

render: function() {
    ...
    <a data-tag={i} style={showStyle} onClick={this.removeTag.bind(null, i)}></a>
    ...
},
removeTag: function(i) {
    // do whatever
},

注意bind()。因为这都是javascript，你可以做一些方便的事情。我们不再需要为了跟踪DOM节点而将数据附加到它们。

在我看来，这比依赖DOM事件要干净得多。

2017年4月更新:这些天我写onClick={() => this.removeTag(I)}而不是.bind