React + re-resizable实现拖拽改变宽度

一、效果展示

二、实现方法

此效果的实现使用了第三方组件re-resizable，通过此React组件可以很便捷的实现可拖拽改变组件大小的需求。

三、使用方法

1. 安装re-resizable组件。

npm install --save re-resizable

2. 简单使用

import React, {Component} from 'react';
import { Resizable } from "re-resizable";

export default class Demo extends Component {
    render() {
        return (
            <Resizable
                defaultSize={{width:320, height:200}}
            >
                可拖拽组件
            </Resizable>
        );
    }
}

3. 相关常用属性方法

参数	说明	类型
defaultSize	初始默认宽高	string / number
minWidth	宽度下限	string / number
minHeight	高度下限	string / number
maxWidth	宽度上限	string / number
maxHeight	高度上限	string / number
enable	设置可调整方向权限，可调整很多方向具体请参考官网
lockAspectRatio	用于锁定纵横比，还有相关属性方法，具体参考官网	boolean / number
bounds	指定边界大小	window / parent / HTMLElement
…	…	…

4. 当组件调整时常用方法

• onResizeStart 调整组件开始时调用。

• onResize 调整组件进行时调用。

• onResizeStop 调整组件完成时调用。

简单的使用案例：

import React, {Component} from 'react';
import { Resizable } from "re-resizable";

export default class Demo extends Component {

    onResizeStart = (e) => {
        console.log("onResizeStart执行");
        console.log(e);
    };
    onResize = (e) => {
        console.log("onResize执行");
        console.log(e);
    };
    onResizeStop = (e) => {
        console.log("onResizeStop执行");
        console.log(e);
    };

    render() {
        return (
            <Resizable
                style={{background: "#8cdbd5"}}
                defaultSize={{width:320, height:200}}
                onResize={(e) => this.onResize(e)}
                onResizeStart={(e) => this.onResizeStart(e)}
                onResizeStop={(e) => this.onResizeStop(e)}
            >
                可拖拽组件
            </Resizable>
        );
    }
}

4. 使用小结

通过观察这几个方法在控制台所打印的内容可以发现，在每次调用这些方法时我们都可以获取到关于此次调整事件的一些信息，而通过这些信息我们就可以完成许多相关性的工作，例如通过在onResize执行时获取调整的宽度和高度传递给父组件或者使用状态管理器进行管理，这样就可以实现拖拽A组件的同时B组件也跟着变化的效果。

end