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"]
这些都没用。
用不同于你要求的方式帮助你达到预期的结果:
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
我认为建议在需要使用它的地方绑定所有方法。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