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 cách khai báo biến trong Javascript 
Các sự kiện (Event) trong Javascript 
Hướng tạo thanh search bar bằng CSS 
Hàm array.slice() trong Javascript 
Tính tổng hai số bằng Javascript (cộng hai số) 
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 BasicForm trong ReactJS
Trong bài viết này, mình sẽ tập trung vào bài tập ReactJS liên quan đến Forms và Controlled Components.
Basic Form trong ReactJS
Mình sẽ bắt đầu bằng việc tạo một component BasicForm. Đây là một bài tập đơn giản, nhưng quan trọng để hiểu cách sử dụng Controlled Components để quản lý trạng thái của các trường nhập liệu. Component này sẽ chứa một biểu mẫu với các trường nhập liệu cho tên và email. Khi người dùng điền thông tin và nhấn nút "Submit", mình sẽ hiển thị thông tin đã nhập trong console.
Bước 1: Tạo một ứng dụng React
Mở terminal và chạy lệnh sau để tạo một ứng dụng React mới:
npx create-react-app react-forms-exercise cd react-forms-exercise
Bước 2: Tạo component BasicForm
Trong thư mục src, tạo một file mới có tên là BasicForm.js. Đây sẽ là file chứa component BasicForm.
BasicForm.js
import React, { useState } from 'react';
import './BasicForm.css';
const BasicForm = () => {
// Khởi tạo state cho các trường nhập liệu
const [formData, setFormData] = useState({
name: '',
email: '',
});
// Hàm xử lý khi có sự thay đổi trên các trường nhập liệu
const handleChange = (e) => {
const { name, value } = e.target;
setFormData({
...formData,
[name]: value,
});
};
// Hàm xử lý khi nút "Submit" được nhấn
const handleSubmit = (e) => {
e.preventDefault();
console.log('Thông tin đã nhập:', formData);
};
return (
<form onSubmit={handleSubmit}>
<label>
Tên:
<input
type="text"
name="name"
value={formData.name}
onChange={handleChange}
/>
</label>
<br />
<label>
Email:
<input
type="email"
name="email"
value={formData.email}
onChange={handleChange}
/>
</label>
<br />
<button type="submit">Submit</button>
</form>
);
};
export default BasicForm;
Bước 3: Tạo một file CSS mới có tên là BasicForm.css
BasicForm.css
form {
max-width: 400px;
margin: auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
label {
display: block;
margin-bottom: 8px;
}
input {
width: 100%;
padding: 8px;
margin-bottom: 16px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
background-color: #4caf50;
color: white;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
Bước 4: Sử dụng component BasicForm trong App
Sửa nội dung file src/App.js để sử dụng component BasicForm:
App.js
import React from 'react';
import BasicForm from './BasicForm';
function App() {
return (
<div className="App">
<h1>React Forms Exercise</h1>
<BasicForm />
</div>
);
}
export default App;
Bước 5: Chạy ứng dụng React
Quay lại terminal và chạy lệnh sau để khởi động ứng dụng React:
npm start
Mở trình duyệt và truy cập http://localhost:3000 để xem ứng dụng của bạn. Bạn sẽ thấy form với trường nhập liệu cho tên và email. Khi bạn điền thông tin và nhấn nút "Submit", thông tin sẽ được hiển thị trong console.
Đây là bài tập đơn giản để làm quen với ReactJS và cách sử dụng Controlled Components để quản lý trạng thái của các trường nhập liệu.
Trong bài tập này, mình đã tạo thành công một Basic Form trong ReactJS, sử dụng Controlled Components để quản lý trạng thái của các trường nhập liệu. Qua đó, bạn có thể thấy cách ReactJS giúp mình dễ dàng theo dõi và xử lý dữ liệu người dùng. Tiếp theo, bạn có thể mở rộng và áp dụng các khái niệm này vào các ứng dụng React lớn hơn và phức tạp hơn. Happy coding!
Bài giải
-------------------- ######## --------------------
Câu hỏi thường gặp liên quan:
- Tạo một component BasicForm trong ReactJS
- Tạo một component LoginForm trong ReactJS
- Tạo một component RegistrationForm trong ReactJS
- Tạo một component SearchBar trong ReactJS
- Tạo một component TodoForm trong ReactJS
- Tạo một component FileUpload trong ReactJS
- Tạo một component PasswordChangeForm trong ReactJS
- Tạo một component DynamicFormFields trong ReactJS
- Tạo một component CurrencyConverter trong ReactJS
- Tạo một component DatePicker trong ReactJS
- Tạo một component AutocompleteSearch trong ReactJS
- Tạo một component SurveyForm trong ReactJS
- Tạo một component MultiStepForm trong ReactJS
- Tạo một component ColorPicker trong ReactJS
- Tạo một component AddressForm trong ReactJS
- Tạo một component SurveyPoll trong ReactJS
- Tạo một component TimeTrackingForm trong ReactJS
- Tạo một component QuizForm trong ReactJS
- Tạo một component ReservationForm trong ReactJS
