React能够呈现自定义属性 http://facebook.github.io/react/docs/jsx-gotchas.html:

如果要使用自定义属性,则应该在其前面加上 数据- - - - - -。 <div data-custom-attribute="foo" />

这是一个好消息,除了我找不到一种方法来访问它从事件对象,例如:

render: function() {
...
<a data-tag={i} style={showStyle} onClick={this.removeTag}></a>
...
removeTag: function(event) {
    this.setState({inputVal: event.target????}); 
},

元素和数据属性在html中呈现良好。像style这样的标准属性可以通过event.target.style fine访问。 而不是事件。我试了试:

 event.target.props.data.tag
 event.target.props.data["tag"]
 event.target.props["data-tag"]  
 event.target.data.tag
 event.target.data["tag"]
 event.target["data-tag"]

这些都没用。


当前回答

如果有人想用事件。target在React中找到一个空值,这是因为一个SyntheticEvent替换了event.target。SyntheticEvent现在持有'currentTarget',例如在event.currentTarget.getAttribute('data-username')中。

https://facebook.github.io/react/docs/events.html

看起来React这样做是为了在更多的浏览器上工作。您可以通过nativeEvent属性访问旧的属性。

其他回答

在React中,你不需要html数据,使用函数返回另一个函数;像这样,它是非常简单的发送自定义参数,你可以访问自定义数据和事件。

render: function() {
...
<a style={showStyle} onClick={this.removeTag(i)}></a>
...
removeTag: (i) => (event) => {
    this.setState({inputVal: i}); 
},
// Method inside the component
userClick(event){
 let tag = event.currentTarget.dataset.tag;
 console.log(tag); // should return Tagvalue
}
// when render element
<a data-tag="TagValue" onClick={this.userClick}>Click me</a>

如果有人想用事件。target在React中找到一个空值,这是因为一个SyntheticEvent替换了event.target。SyntheticEvent现在持有'currentTarget',例如在event.currentTarget.getAttribute('data-username')中。

https://facebook.github.io/react/docs/events.html

看起来React这样做是为了在更多的浏览器上工作。您可以通过nativeEvent属性访问旧的属性。

你可以简单地使用event.target.dataset对象。这将为您提供具有所有数据属性的对象。

我认为建议在需要使用它的地方绑定所有方法。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