react.js - 当视窗size改变的时候,在react里要怎么监听视窗大小的变化呢?
本文介绍了react.js - 当视窗size改变的时候,在react里要怎么监听视窗大小的变化呢?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
我写了一个slide-to-open的demo,可以先看下:
https://yisha0307.github.io/D...
这个在窗口大小不变的时候是ok的,但如果你改变了窗口的大小,下面那排点就会出现问题(主要是因为我这排点的数量是动态算出来的,然而因为左边的这个大圆的left的值我是最初设置了一个initial state,是window.innerWidth * 0.32,然后因为改变视窗大小这个行为没有改变这个state,所以我的大圆不动,导致那排点的数量保持不变,这样窗口大小变化的时候就会出现明显bug。。。
(不知道我这么说各位能不能理解,贴一段代码):
class SlideButton extends React.Component{
constructor(props){
super(props);
this.state = {
left: this.props.left,
isDragging: false, //设置是不是在drag状态下
relativex:null,
};
}
handleMouseDown(e){
this.setState({
isDragging: true,
relativex: e.pageX - this.props.left
});
}
handleMouseMove(e){
if(this.state.isDragging){
const maxX = window.innerWidth *0.57;
let moveX = e.pageX - this.state.relativex;
moveX = Math.min(Math.max(this.props.left, moveX), maxX);
this.setState({left: moveX});
}else{
return false;
}
console.log((window.innerWidth*0.6 - this.state.left) / 30);
}
handleMouseUp(e){
const maxX = window.innerWidth *0.57;
if(this.state.left === maxX){
this.setState({
isDragging: false,
relativex: null,
});
this.props.handleChild();
}else{
this.setState({
isDragging: false,
relativex: null,
left: this.props.left
});
}
}
render(){
const left = this.state.left;
let dotCount = Math.floor((window.innerWidth*0.6 - left) / 12);
return (
<div className ='slide__button' style={{'left': left}} onMouseUp={this.handleMouseUp.bind(this)} onMouseMove={this.handleMouseMove.bind(this)} onMouseDown={this.handleMouseDown.bind(this)}>
<div id='bigcircle'><div id='innercircle'>{'>'}</div></div>
<DotLine count ={dotCount} />
<div id='smallcircle'>{'.'}</div>
</div>);
}
}
const DotLine = ({count}) =>{
const dotline = [];
for(let i =0; i< count-8; i++){
dotline.push(<div className='dotdot' key={i}/>);
}
return (
<div className='dotline'>
{dotline.concat()}
</div>);
}
具体可以看:https://github.com/yisha0307/...
然后问题来了:在react里要怎么监听视窗大小的变化呢?
解决方案
在组件第一次渲染完成时,即componentDidMount阶段,把监听事件绑定到window对象上。在组件析构阶段,即componentWillUnmount接触绑定。
componentDidMount() {
window.addEventListener('resize', this.onWindowResize)
}
componentWillUnmount() {
window.removeEventListener('resize', this.onWindowResize)
}
这篇关于react.js - 当视窗size改变的时候,在react里要怎么监听视窗大小的变化呢?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文