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"]
这些都没用。
如果你有多个不同数据标签(年龄,姓名,电子邮件)的图标:
<button
data-label="name"
onMouseOver={handleValue}
className="icon"
>
<FaUser />
</button>
当鼠标停留在图标上时,可以通过访问data-label来更改标题
const handleValue = (e) => {
// making sure mouse is over an icon
if (e.target.classList.contains("icon")) {
const newValue = e.target.dataset.label;
setTitle(newValue);
setValue(person[newValue]);
}
};
如果你有多个不同数据标签(年龄,姓名,电子邮件)的图标:
<button
data-label="name"
onMouseOver={handleValue}
className="icon"
>
<FaUser />
</button>
当鼠标停留在图标上时,可以通过访问data-label来更改标题
const handleValue = (e) => {
// making sure mouse is over an icon
if (e.target.classList.contains("icon")) {
const newValue = e.target.dataset.label;
setTitle(newValue);
setValue(person[newValue]);
}
};