資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 ReactJS 中使用複選框？
複選框允許使用者在表單中選擇多個值。此外，它對於獲取使用者的布林響應也很有用。例如，Instagram 喜歡的按鈕就是一種複選框。當用戶喜歡帖子時，它會顯示填充的圖示；否則，它會顯示邊框圖示。
在這裡，我們將學習如何在 ReactJS 中處理單個和多個複選框。首先，我們將建立自定義複選框，然後學習如何使用 Material UI 的複選框元件。
在 ReactJS 中建立自定義複選框元件
我們可以在 ReactJS 中使用普通的 HTML 輸入來建立複選框。我們可以新增 onChange 事件作為 prop 來處理複選框的值。
語法
使用者可以按照以下語法在 ReactJS 中使用複選框。
function handleChange(e) {
setChecked(e.target.checked);
}
<input value="test" type="checkbox" onChange={handleChange} />
在上述語法中，每當使用者選中或取消選中複選框時，我們都會呼叫 handleChange() 函式。
示例
在下面的示例中，我們使用 <input> 元素建立了複選框。在 handleChange() 函式中，我們將複選框的布林值設定為 checked 變數。
我們根據 checked 變數的 true 和 false 值在輸出中顯示訊息。
import React from "react";
const App = () => {
const [checked, setChecked] = React.useState(false);
function handleChange(e) {
setChecked(e.target.checked);
}
return (
<div>
<h4>
{" "}
Creating the <i> Custom controlled checkbox </i> in the React application {" "}
</h4>
<input value = "test" type = "checkbox" onChange = {handleChange} />
<br></br>
{checked ? (
<div> Checkbox is checked. </div>
) : (
<div> Checkbox is not checked. </div>
)}
</div>
);
};
export default App;
輸出
示例
在下面的示例中，我們使用 <input> 元素建立了多個複選框。每當使用者選中或取消選中任何複選框時，它都會呼叫 handleChage() 函式。
在 handleChange() 函式中，我們檢查複選框是否被選中，並將複選框值新增到 allChecked 陣列中。如果複選框未選中，我們將從 allChecked 陣列中刪除複選框值。
import React from "react";
const App = () => {
const [allchecked, setAllChecked] = React.useState([]);
function handleChange(e) {
if (e.target.checked) {
setAllChecked([...allchecked, e.target.value]);
} else {
setAllChecked(allchecked.filter((item) => item !== e.target.value));
}
}
return (
<div>
<h4>
{" "}
Creating the {" "}
<i>
{" "}
Custom controlled checkbox and handling the multiple checkboxes
{" "}
</i>{" "} in the React application {" "}
</h4>
<div>
<input value = "One" type = "checkbox" onChange = {handleChange} />
<span> One </span>
</div>
<div>
<input value = "Two" type = "checkbox" onChange = {handleChange} />
<span> Two </span>
</div>
<div>
<input value = "Three" type = "checkbox" onChange = {handleChange} />
<span> Three </span>
</div>
<div>
<input value = "Four" type = "checkbox" onChange = {handleChange} />
<span> Four </span>
</div>
<div>
<input value = "Five" type = "checkbox" onChange = {handleChange} />
<span> Five </span>
</div>
<div>The all checked values are {allchecked.join(" , ")}</div>
</div>
);
};
export default App;
輸出
在 ReactJS 中使用 Material UI 的複選框元件
Material UI 提供了 Checkbox 元件，我們可以將其匯入 React 應用程式並直接使用它。
使用以下命令在 React 專案中安裝 Material UI 庫。
npm install @mui/material @emotion/react @emotion/styled
語法
使用者可以按照以下語法使用 Material UI 的 Checkbox 元件。
<FormControlLabel control = {<Checkbox />} label = "Checkbox" />
在上述語法中，我們將 Checkbox 作為 'control' prop 的值新增。
示例
在下面的示例中，我們使用了 Material UI 的複選框元件。使用者可以在輸出中選中和取消選中複選框。
我們使用 ForControlLabel 元件為複選框新增標籤。在輸出中，使用者可以看到我們添加了“checkbox”標籤。
import React from "react";
import Checkbox from "@mui/material/Checkbox";
import FormControlLabel from "@mui/material/FormControlLabel";
const App = () => {
return (
<div>
<h4>
Using the <i> Checkbox component </i> of Material UI library. {" "}
</h4>
<Checkbox defaultChecked />
<FormControlLabel control = {<Checkbox />} label = "Checkbox" />
</div>
);
};
export default App;
輸出
示例
在下面的示例中，我們自定義了 Material UI 的 Checkbox 元件。我們更改了第一個複選框的顏色。還為第二個複選框添加了自定義圖示。每當使用者選中時，它會顯示填充的圖示；每當使用者取消選中複選框時，它會顯示帶邊框的圖示。
import React from "react";
import Checkbox from "@mui/material/Checkbox";
import BookmarkBorderIcon from "@mui/icons-material/BookmarkBorder";
import BookmarkIcon from "@mui/icons-material/Bookmark";
import { green, blue } from "@mui/material/colors";
const App = () => {
const [isChecked, setChecked] = React.useState(false);
function handleChange(event) {
setChecked(event.target.checked);
}
return (
<div>
<h3>
Using the <i> Checkbox component </i> of Material UI library. {" "}
</h3>
<Checkbox
Icon = {<BookmarkBorderIcon />}
checkedIcon = {<BookmarkIcon />}
onChange = {handleChange}
sx = {{
color: green[500],
"&.Mui-checked": {
color: blue[200],
},
}}
/>
{isChecked ? <h4> Checked </h4> : <h4> Not Checked </h4>}
</div>
);
};
export default App;
輸出
使用者學習瞭如何在 ReactJS 中使用複選框。在第一種方法中，使用者學習瞭如何在 ReactJS 中處理多個複選框。在第二種方法中，我們學習瞭如何使用 Material UI 的 Checkbox 元件。此外，我們可以透過更改樣式和圖示來自定義 Material UI 的 Checkbox 元件。
24K+ 瀏覽量
