react组件案例--滑动鼠标滚轮改变背景颜色

责编:menVScode 2017-06-18 22:38 阅读(1760)

滑动鼠标滚轮改变背景颜色

<body>
    <div id="app"></div>
    <script type="text/babel">
        var Demo = React.createClass({
            getInitialState:function(){
                return{
                    width:'250px',
                    height:'250px',
                    backgroundColor:'#DDDDDD'
                }
            },
            doWheel:function(e){
                console.log(e.deltaY);
                var newColor = (parseInt(this.state.backgroundColor.substr(1),16) + e.deltaY).toString(16);
                newColor = '#' + newColor.toUpperCase()
                console.log(newColor)
                this.setState({
                    backgroundColor:newColor
                })
            },
            render:function(){
                return <div onWheel={this.doWheel} style={this.state}></div>
            }
        });
        ReactDOM.render(
            <Demo />,document.getElementById('app')
        )
    </script>
</body>
标签: react reactjs
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码