Các hàm xử lý chuỗi trong Javascript (cắt / tách / nối chuỗi ..) 
Chia lấy phần dư / chia lấy phần nguyên trong javascript 
Các sự kiện (Event) trong Javascript 
Các cách khai báo biến trong Javascript 
Hướng tạo thanh search bar bằng CSS 
Bắt sự kiện click trong Javascript 
Cách khai báo biến trong PHP, các loại biến thường gặp 
Download và cài đặt Vertrigo Server 
Thẻ li trong HTML 
Thẻ article trong HTML5 
Cấu trúc HTML5: Cách tạo template HTML5 đầu tiên 
Cách dùng thẻ img trong HTML và các thuộc tính của img 
Thẻ a trong HTML và các thuộc tính của thẻ a thường dùng Tạo một component ToggleButton trong ReactJS
Trong bài tập này, mình đã tạo một component ToggleButton trong ReactJS. Khi người dùng nhấn vào nút, trạng thái của nút chuyển đổi giữa "ON" và "OFF". Màu sắc và kiểu hiển thị của nút cũng được điều chỉnh dựa trên trạng thái.
Toggle Button trong ReactJS
Tạo Component ToggleButton
// src/components/ToggleButton.js
import React, { useState } from 'react';
import './ToggleButton.css';
const ToggleButton = () => {
const [isOn, setIsOn] = useState(false);
const handleToggle = () => {
setIsOn(!isOn);
};
return (
<div className="toggle-button-container">
<button onClick={handleToggle} className={isOn ? 'on' : 'off'}>
{isOn ? 'ON' : 'OFF'}
</button>
</div>
);
};
export default ToggleButton;
Giải thích chi tiết:
-
useState: Sử dụng useState hook để tạo một biến state isOn có giá trị khởi tạo là false. isOn là trạng thái của nút, đại diện cho trạng thái "ON" hoặc "OFF".
-
handleToggle: Hàm này được gọi khi nút được nhấn. Nó sử dụng setIsOn để đảo ngược giá trị của isOn, chuyển đổi giữa "ON" và "OFF".
-
Render JSX: Component hiển thị một nút với văn bản "ON" hoặc "OFF" tùy thuộc vào giá trị của isOn. Class của nút cũng được điều chỉnh dựa trên trạng thái để áp dụng các hiệu ứng CSS khác nhau.
-
CSS Class: Tùy thuộc vào giá trị của isOn, class của nút sẽ là "on" hoặc "off", điều này giúp thay đổi màu sắc và kiểu hiển thị của nút.
Tạo CSS cho ToggleButton
/* src/components/ToggleButton.css */
.toggle-button-container {
text-align: center;
margin-top: 20px;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
border: none;
border-radius: 5px;
}
.on {
background-color: #4caf50;
color: #fff;
}
.off {
background-color: #f44336;
color: #fff;
}
Tích hợp ToggleButton vào ứng dụng
// src/App.js
import React from 'react';
import ToggleButton from './components/ToggleButton';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<ToggleButton />
</header>
</div>
);
}
export default App;
Kết quả:
Bài tập "ToggleButton" giúp bạn làm quen với cách xử lý sự kiện trong ReactJS và cách thay đổi trạng thái của component dựa trên sự kiện người dùng. Nếu có bất kỳ câu hỏi hoặc cần giải thích thêm, đừng ngần ngại đặt câu hỏi. Chúc bạn thành công!
Bài giải
-------------------- ######## --------------------
Câu hỏi thường gặp liên quan:
- Tạo một component ButtonClick trong ReactJS
- Tạo một component ToggleButton trong ReactJS
- Tạo một component InputChange trong ReactJS
- Tạo một component MouseHover trong ReactJS
- Tạo một component FormSubmission trong ReactJS
- Tạo một component DoubleClick có chứa một phần tử trong ReactJS
- Tạo một component KeyPress trong ReactJS
- Tạo một component Image Click trong ReactJS
- Tạo một component Context Menu trong ReactJS
- Tạo một component Drag and Drop trong ReactJS
- Tạo một component LinkClick trong ReactJs
- Tạo một component ResizeWindow trong ReactJS
- Tạo một component HoverEffect trong ReactJS
- Tạo một component DynamicButton trong ReactJS
- Tạo một component PasswordStrengthChecker trong ReactJS
- Tạo một component CopyToClipboard trong ReactJS
- Tạo một component ScrollEvent trong ReactJS
- Tạo một component Autocomplete trong ReactJS
