React组件自定义属性的定义及使用
在很多情况下,react组件中,需要使用自定义的属性。也经常需要在默认事件(如,点击onClick)中使用自定义属性。举一个很简单的例子,点击一个按钮,并显示这个按钮“自定义属性”中的string。
最近正在写日历组件,希望给按钮添加点击时间
import React, { Component } from 'react';
export default MyButton extends Component{
clickBtn(e){
console.log(e.currentTarget.getAttribute('data-value'));
}
render(){
return(
<button onClick={this.clickBtn.bind(this) data-value='Hello World'}>Click Me!</button>
)
}
}
此处,在定义和使用自定义属性的时候,有两点需要注意:
自定义属性的时候,需要使用
data-
前缀
使用自定义属性的时候,通过
e.currentTarget
获取到当前DOM,再通过属性的方式获取