在當前div上定義一個點擊事件
當然這裏的data-xx名字時可以自己 定義的但是我們一般定義爲與元素的值由對應意義的名字
<div onClick={this.handleClick}>
<div data-index='1'>小強</div>
<div data-index='2'>小紅</div>
<div data-index='3'>小明</div>
<div data-index='4'>小目</div>
</div>
//之後我們去方法當中去定義一個對應的方法去獲取值,會獲取到自定義屬性的一個對象集合
handleClick(event){
// 這樣取值
const dataset = event.target.dataset;
const index = dataset.index;
console.log('當前元素index 值爲 ', index);
}
還有的時候元素層級深,只想獲取到當前綁定事件元素的自定義屬性,請看下面場景;
<div >
<div data-index='1' onClick={this.handleClick}><span>小強</span></div>
<div data-index='2' onClick={this.handleClick}><span>小紅</span></div>
<div data-index='3' onClick={this.handleClick}><span>小明</span></div>
<div data-index='4' onClick={this.handleClick}><span>小目</span></div>
</div>
//之後我們去方法當中去定義一個對應的方法去獲取值,會獲取到自定義屬性的一個對象集合
handleClick(event){
// 這樣需要把 target 改變成 currentTarget,避免點擊到span, 取不到div上面的值
const dataset = event.currentTarget.dataset;
const index = dataset.index;
console.log('當前元素index 值爲 ', index);
}