資料結構
網路
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+ 次瀏覽
廣告