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 ColorPicker có chứa state trong ReactJS
Trong bài tập này, mình sẽ tạo một component ReactJS có tên là ColorPicker. Component này sẽ có một trạng thái colors để theo dõi danh sách các màu. Mình sẽ hiển thị một hộp màu và cho phép người dùng chọn một màu từ danh sách. Khi một màu được chọn, tên của màu đó sẽ được hiển thị.
Tạo một component ReactJS có tên là ColorPicker
Bước 1: Tạo Component ColorPicker
Mở file src/components/ColorPicker.js và thêm nội dung sau:
// src/components/ColorPicker.js
import React, { useState } from 'react';
import './ColorPicker.css';
const ColorPicker = () => {
// Sử dụng hook useState để tạo trạng thái colors, khởi tạo là một mảng các màu
const [colors] = useState([
{ name: 'Red', code: '#FF0000' },
{ name: 'Green', code: '#00FF00' },
{ name: 'Blue', code: '#0000FF' },
{ name: 'Yellow', code: '#FFFF00' },
{ name: 'Purple', code: '#800080' },
]);
// Sử dụng hook useState để tạo trạng thái selectedColor, khởi tạo là màu đầu tiên
const [selectedColor, setSelectedColor] = useState(colors[0]);
// Hàm xử lý sự kiện khi một màu được chọn
const handleColorSelect = (color) => {
setSelectedColor(color);
};
// Cấu trúc JSX để hiển thị component ColorPicker
return (
<div className="color-picker">
<h2>Color Picker</h2>
<div className="color-box">
{colors.map((color, index) => (
<div
key={index}
className="color"
style={{ backgroundColor: color.code }}
onClick={() => handleColorSelect(color)}
></div>
))}
</div>
<p>Selected Color: {selectedColor.name}</p>
</div>
);
};
export default ColorPicker;
Bước 2: Tạo File CSS
Tạo một file mới có tên là ColorPicker.css trong thư mục src/components. Thêm các quy tắc CSS để tùy chỉnh giao diện của ColorPicker:
/* src/components/ColorPicker.css */
.color-picker {
text-align: center;
margin-top: 20px;
}
h2 {
color: #333;
}
.color-box {
display: flex;
justify-content: center;
margin-top: 20px;
}
.color {
width: 50px;
height: 50px;
margin: 0 10px;
border: 2px solid #fff;
cursor: pointer;
}
p {
margin-top: 20px;
font-weight: bold;
}
Bước 3: Sử dụng Component trong App
Mở file src/App.js và sửa nội dung như sau:
// src/App.js
import React from 'react';
import ColorPicker from './components/ColorPicker';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<ColorPicker />
</header>
</div>
);
}
export default App;
Bước 4: Chạy ứng dụng
Mở terminal và chạy ứng dụng bằng lệnh:
npm start
Ứng dụng sẽ mở trên http://localhost:3000 và hiển thị component ColorPicker với danh sách màu. Khi một màu được chọn, tên của màu đó sẽ được hiển thị.
Trong bài tập này, mình đã tạo thành công một component ColorPicker để cho phép người dùng chọn màu từ danh sách. Sử dụng hook useState để quản lý trạng thái mảng các màu và màu được chọn. CSS được sử dụng để tạo giao diện thân thiện với người dùng, với các ô màu có khả năng chọn.
Hy vọng rằng bài tập này đã giúp bạn hiểu rõ hơn về cách sử dụng useState để quản lý trạng thái trong ReactJS và tạo các component tương tác. Hãy tiếp tục học và phát triển kỹ năng của bạn!
Bài giải
-------------------- ######## --------------------
Câu hỏi thường gặp liên quan:
- Tạo một component Counter có chứa một state là count bằng ReactJS
- Tạo một component Clock có chứa state là currentTime trong ReactJS
- Tạo một component Toggle với một state là isOn trong ReactJS
- Tạo một component TodoList với state là một mảng todos trong ReactJS
- Tạo một component CountdownTimer với state trong ReactJS
- Tạo một component ColorPicker có chứa state trong ReactJS
- Tạo một component WeatherApp với state trong ReactJS
- Tạo một component QuizGame với state bằng ReactJS
- Tạo một component ImageCarousel với state bằng ReactJS
- Tạo một component ShoppingCart với state bằng ReactJS
