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屋！