自定义属性

注意:自定义属性是HTML5的特性

在react中使用自定义属性非常方便快捷,而且能够帮助我们快速处理一些逻辑。请看以下实例:

render:function(){
    const _this = this;
    return (
        this.state.data.map(function(item,index){
            <div data-index={index} onClick={_this.handleClick}>删除</div>
        })
    )
},
handleClick:function(e){
    const delId = e.target.getAttribute('data-index');
    let data = JSON.parse(JSON.stringify(this.state.data));
    data.splice(delId,1);
    this.setState({
        data:data
    })
}
getInitialState:function(){
    return {
        data:[
            {
                name:'apple'
            },
            {
                name:'banana'
            }
        ]
    }
}

注意以下几点:

  • 自定义属性约定以data开头,通常是data-*的格式

  • 通过getAttribute[attribute-name]的方法获得自定义属性的值