React + re-resizable实现拖拽改变宽度_Aaranlei的博客-程序员秘密

技术标签： react.js 前端 React javascript

一、效果展示

二、实现方法

在这里插入图片描述

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

三、使用方法

安装re-resizable组件。

npm install --save re-resizable

简单使用

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>
        );
    }
}

相关常用属性方法

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

当组件调整时常用方法

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>
        );
    }
}

使用小结

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

end

本文链接：https://blog.csdn.net/weixin_44298385/article/details/123433601

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

vue项目配置生产环境和发布环境的接口地址_vue项目上线后请求地址还是测试环境的_sxy1847589546的博客-程序员秘密

平常我们团队开发时,都在公司的局域网内,调用接口也是局域网内部的,但是项目上线时,请求接口是线上服务器端的,那么就有接口之间的来回切换问题.在使用vue-cli搭建项目以后,做相关配置就可以实现,不用手动更改接口路径,也可以请求不同环境下的接口.1.设置不同的接口地址先找到以下文件/config/dev.env.js/config/prod.env.js可以看到dev.env.js里面内容如下这是...

numpy-创建一个一维数组_numpy定义一维数组_一个IT小白的博客-程序员秘密

数组中的数据类型，下面实例可以看出优先级规则是：string > float > int

ClassNotFoundException: org.springframework.web.context.ContextLoaderListene_HaHadoop的博客-程序员秘密

今天学习spring+cxf的时候遇到一个问题：在web.xml中配置了spring的上下文监听器：Xml代码 listener> listener-class>org.springframework.web.context.ContextLoaderListenerlistener-class> listener> 随后启动tom

urllib库安装_urllib库怎么安装_好好爱自己1的博客-程序员秘密

问题:urllib3安装1、python3 pip install urllib安装错误信息： Could not find a version that satisfies the requirement urllib (from versions)No matching d...

【大厂面试】今日头条前端面试17问_柯晓楠的博客-程序员秘密

对async、await的理解，内部原理介绍下Promise，内部实现清除浮动定位问题（绝对定位、相对定位等）从输入URL到⻚面加载全过程tcp3次握手tcp属于哪一层（1 物理层 -> 2 数据链路层 -> 3 网络层(ip)-> 4 传输层(tcp) -> 5 应用层(http)）redux的设计思想接入redux的过...

基于kali Linux 的 OpenVAS【Greenbone】虚机镜像_东方闲仁的博客-程序员秘密

基于kali Linux 的 openvas【greenbone】虚机镜像新版openvas 切换为gvm后，操作命令有变化，摸索装好后，做了虚机镜像，有需要的请下载试用。链接: https://pan.baidu.com/s/1pWgHUqquCH6tfHEtUDSvUQ 提取码: yxib【OpenVAS是开放式漏洞评估系统】Greenbone Security Assistant 绿骨头安全助理。基于kali Linux 系统的虚机镜像东方闲仁...