資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何在 ReactJS 中建立對話方塊？
對話方塊類似於 ReactJS 中的模態框的彈出框。在原生 JavaScript 中，您可能已經使用了 alert() 方法，該方法允許我們在警示框中顯示警示訊息。此外，原生 JavaScript 還提供了確認框和提示框來獲取使用者輸入。
對話方塊還允許我們執行所有操作。我們可以根據需要將普通的 HTML 新增到對話方塊中，它可以作為一個彈出框。
在本教程中，我們將使用各種庫來建立對話方塊。
使用 Material-Ui 庫
Material-Ui 庫為 React 提供了許多 UI，對話方塊就是其中之一。我們可以在專案中安裝 Material-Ui npm 包並匯入它。
使用者可以在終端中執行以下命令以在專案中安裝 Material-Ui。
npm install @mui/material @emotion/react @emotion/styled
語法
使用者可以按照以下語法使用 Material-Ui 庫建立對話方塊。
<Dialog onClose={handleClose} open={open}>
{/* add HTML here for dialog*/}
</Dialog>
在上面的語法中，我們從 Material-Ui 匯入了 Dialog 並將其用作元件。此外，我們需要將 open 的值作為 prop 傳遞以處理對話方塊的顯示和隱藏。
示例 1 的步驟
步驟 1 − 從 Material-Ui 庫匯入 Dialog 和 DialogTitle 元件。
步驟 2 − 在我們的應用程式中使用 Dialog 元件新增對話方塊。此外，在 Dialog 元件內部使用 DialogTitle 元件為對話方塊建立標題。
步驟 3 − 此外，將 open 變數作為 Dialog 的 prop 傳遞，表示對話方塊是開啟還是關閉。此外，當 onClose 事件觸發時，我們將呼叫 handleClose() 函式。
步驟 4 − 在 handleClose() 函式中，使用 handleDisplay() 函式並將 openDialog 變數的值設定為 false 以隱藏對話方塊。
步驟 5 − 此外，建立一個按鈕以開啟對話方塊。當用戶單擊該按鈕時，它應該呼叫 openDialogBox() 函式，該函式將 openDialog 變數的值設定為 true。
示例 1
在下面的示例中，我們使用 Material-UI 庫建立了簡單的對話方塊。我們建立了各種函式來隱藏和顯示對話方塊。此外，我們在 Dialog 元件內部添加了行 HTML 並設定了一些樣式。
import * as React from "react";
import DialogTitle from "@mui/material/DialogTitle";
import Dialog from "@mui/material/Dialog";
import { height } from "@mui/system";
export default function App(props) {
const [openDialog, handleDisplay] = React.useState(false);
const handleClose = () => {
handleDisplay(false);
};
const openDialogBox = () => {
handleDisplay(true);
};
const dialogStyle = {
padding: "20px",
};
const buttonStyle = {
width: "10rem",
fontsize: "1.5rem",
height: "2rem",
padding: "5px",
borderRadius: "10px",
backgroundColor: "green",
color: "White",
border: "2px solid yellow",
};
return (
<>
<h2>
Using the <i> Material-Ui library </i> to create a dialog box in ReactJs.
</h2>
<button style = {buttonStyle} onClick = {openDialogBox}>
Open Dialog
</button>
<Dialog onClose = {handleClose} open = {openDialog}>
<DialogTitle> Demo Dialog </DialogTitle>
<h3 style = {dialogStyle}>
Click outside of the dialog to close the Dialog box.
</h3>
</Dialog>
</>
);
}
輸出
示例 2
在下面的示例中，我們使用了 Material-Ui 庫來建立確認框。確認框包含確認和取消按鈕。因此，無論使用者按下哪個按鈕，我們都可以根據該按鈕執行某些操作。
在這裡，即使使用者單擊確認框，我們也只會關閉確認框。但是，開發人員可以建立單獨的函式並分別處理確認按鈕的點選，而不是僅僅關閉確認對話方塊。
import * as React from "react";
import DialogTitle from "@mui/material/DialogTitle";
import Dialog from "@mui/material/Dialog";
export default function App(props) {
const [openDialog, handleDisplay] = React.useState(false);
const handleClose = () => {
handleDisplay(false);
};
const openDialogBox = () => {
handleDisplay(true);
};
const buttonStyle = {
width: "10rem",
fontsize: "1.5rem",
height: "2rem",
padding: "5px",
borderRadius: "10px",
backgroundColor: "green",
color: "White",
border: "2px solid yellow",
};
const divStyle = {
display: "flex",
felxDirection: "row",
position: "absolute",
right: "0px",
bottom: "0px",
// padding: "1rem",
};
const confirmButtonStyle = {
width: "5rem",
height: "1.5rem",
fontsize: "1rem",
backgroundColor: "grey",
color: "black",
margin: "5px",
borderRadius: "10px",
border: "1px solid black",
};
return (
<>
<h2>
Using the <i> Material-Ui library </i> to create a confirm dialog box in ReactJs.
</h2>
<button style = {buttonStyle} onClick = {openDialogBox}>
Open Dialog
</button>
<Dialog onClose = {handleClose} open = {openDialog}>
<DialogTitle> Confirm Dialog </DialogTitle>
<h3 style = {{ marginTop: "-10px", padding: "5px 10px" }}>
Are you sure to delete the item? {" "}
</h3>
<br></br>
<div style = {divStyle}>
<button style = {confirmButtonStyle} onClick = {handleClose}>
Confirm
</button>
<button style = {confirmButtonStyle} onClick = {handleClose}>
Cancel
</button>
</div>
</Dialog>
</>
);
}
輸出
在本教程中，我們看到了使用 Material-Ui 庫建立各種對話方塊的兩個示例。但是，使用者還可以使用 react-js-dialog-box 庫，該庫允許開發人員建立和自定義對話方塊。
12K+ 次瀏覽
