React 滾動事件
阿新 • • 發佈：2017-09-28
true delta subst 事件 rip utf and uil blog
代碼：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>React中的事件</title>
</head>
<body>
<script src="./react-0.13.2/react-0.13.2/build/react.js"></script>
<script src="./react-0.13.2/react-0.13.2/build/JSXTransformer.js"></script>
<script type="text/jsx">
var HelloWorld = React.createClass({
getInitialState: function () {
return {
backgroundColor: ‘#FFFFFF‘
}
},
handleWheel: function (event) {
var newColor = (parseInt(this.state.backgroundColor.substr(1), 16) + event.deltaY * 997).toString(16);
newColor = ‘#‘ + newColor.substr(newColor.length - 6).toUpperCase();
this.setState({
backgroundColor: newColor
})
},
render: function () {
console.log(this.state)
return <div onWheel={this.handleWheel} style={this.state}>
<p>Hello, World</p>
</div>;
},
});
React.render(<HelloWorld></HelloWorld>, document.body);
</script>
</body>
</html>
1.
(parseInt(this.state.backgroundColor.substr(1), 16) 去掉#，將16 進制的顏色轉化為10進制
2.
event.deltaY * 997
顏色進行變化
3.
(parseInt(this.state.backgroundColor.substr(1), 16) + event.deltaY * 997).toString(16);
將10進制的顏色轉化為16進制
效果：
React 滾動事件