React 获取元素的style，实现旋转刷新特效

一、功能需求

如下图所示：利用react点击“换一换”实现小图标旋转刷新效果

二、index.js代码：

html:

<SearchInfoSwitch onClick={() => {handleChangePage(page, totalPage, this.spinIcon)}}>
   {/* ref==获取元素dom  */}
    <i ref={(icon) => {this.spinIcon = icon}} className="iconfont spin">&#xe659;</i>
    换一批
</SearchInfoSwitch>

ps:这里是利用react的ref 获取dom元素，从而进行修改其样式

css:

export const SearchInfoSwitch = styled.div`
  float: right;
  font-size: 13px;
  color: #969696;
  background-color: transparent;
  border-width: 0;
  padding: 0;
  text-decoration: none;
  .spin{
    float: left;
    display: block;
    font-size:12px;
    margin-right: 5px;
    transition: all .2s ease-in;
    transform-origin: center center;
  }
`

三、功能实现

handleChangePage(page, totalPage, spin) {
	// 如果不是0-9的数字，都替换成空
	let originAngle = spin.style.transform.replace(/[^0-9]/ig, '');
	if (originAngle) {
		originAngle = parseInt(originAngle, 10);
	} else {
		originAngle = 0;
	}
	spin.style.transform ='rotate('+(originAngle+360)+'deg)';
	if(page < totalPage){
		dispath(actionCreators.changePage(page+1))
	} else {
		dispath(actionCreators.changePage(1))
	}
}

ps:当点击换一批的时候，dom元素的transform的值发生变化。从而实现点击旋转的效果。（需要点击换一批数据分页效果的可以加QQ找我要）