数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会研究
时尚研究
法律研究如何在 React JS 中创建一个可调整大小的元素
在本文中，我们将展示如何在 React JS 中创建一个可调整大小的元素。我们总是会在 HTML 中创建可调节文本区域，但当涉及到其他元素的可调整性时，这似乎是不可能的。在 React 中，我们可以借助一个简单的库轻松创建可调节元素。
示例
首先安装以下包 -
npm install --save re-resizable
re-resizable 用于导入可调容器，它将用于向任何 DOM 元素添加可调整功能。
在 App.js 中添加以下代码行 -
import React, { useState } from "react";
import { Resizable } from "re-resizable";
export default function App() {
const [state, setState] = useState({ width: 320, height: 200 });
return (
<Resizable
style={{ marginLeft: 500, marginTop: 200, border: "1px solid black" }}
size={{ width: state.width, height: state.height }}
onResizeStop={(e, direction, ref, d) => {
setState({
width: state.width + d.width, height: state.height + d.height,});
}}>
Sample with size
</Resizable>
);
}说明
在 <Resizable> 中添加任何元素都会使其可调整大小。
size 特性定义可调整组件的大小。
onResizeStop 定义用户尝试调整元素大小时应执行的操作。此处我们在 State 中更改元素的宽度和高度，这会对 size 特性做出所需的更改。
d.width 和 d.height 等参数定义了宽度或高度应增加或减少多少。
输出
执行后，将生成以下输出 -
更新于: 2021 年 9 月 28 日
4K+ 次浏览
广告