应用步骤:
import { Resizable, ResizableBox } from 'react-resizable';
<Resizable className="box" axis='y' height={this.state.height} width={this.state.width} onResize={this.onResize}>
<div className="box" style={{ width: this.state.width + 'px', height: this.state.height + 'px' }}>
<span className="text">{"Raw use of <Resizable> element. 200x200, no constraints."}</span>
</div>
</Resizable>
这一切看似已经完成了,但是需要我们把react-resizable中的styles.css引入或者复制到当前app.css中才能使用
import '../node_modules/react-resizable/css/styles.css';
添加属性
按照指定宽高比缩放:
lockAspectRatio={16/9}
指定x、y坐标轴方向缩放
axis="x" //x,y,both
缩放最小/大值
minConstraints={[10,10]}
maxConstraints={[Infinity, Infinity]}
缩放控制函数
onResizeStop: _propTypes2.default.func,
onResizeStart: _propTypes2.default.func,
onResize: _propTypes2.default.func,
其他属性请参考官方网站:
https://www.npmjs.com/package/react-resizable/v/1.7.5
https://react.ctolib.com/react-resizable-box.html#articleHeader11
import React, { Component } from 'react';
import { Resizable, ResizableBox } from 'react-resizable';
import './App.css';
class App extends Component {
constructor(props) {
super(props)
this.state = {
width: 200,
height: 200
}
}
onResize = (event, { element, size }) => {
this.setState({ width: size.width, height: size.height });
};
render() {
return (
<div>
<Resizable className="box" axis="x" minConstraints={[200,200]} height={this.state.height} width={this.state.width} onResize={this.onResize}>
<div className="box" style={{ width: this.state.width + 'px', height: this.state.height + 'px' }}>
<span className="text">{"Raw use of <Resizable> element. 200x200, no constraints."}</span>
</div>
</Resizable>
</div>
)
}
}
export default App;
//小白才开始搞这个,有不对的请指教