jsはdata-xxカスタム属性値を取得します.data-xxカスタム属性

7428 ワード

JavaScript react.js メモ

現在の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);
}

簡単な滝の流れ