React + 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>
);
}
}
- 相关常用属性方法
- 当组件调整时常用方法
-
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
