peri hoki perihoki clarustologistics rimashaop.com pola taktis menang gates of olympus x1000 perihoki pemain perihoki bongkar trik jepep starlight princess x1000 perihoki beri panduan lengkap bermain mahjong ways 2 pgsoft tips cara penghasil uang pgsoft mahjong ways 2 perihoki mahjong wins 3 perihoki memberikan penggali terbesar fenomena gates of olympus buka peluang besar bagi duta76 cara dapat pola emas rahasia di duta7 wild west gold trik menang pgsoft mahjong ways 2 modal receh maxwin duta76 duta76 main pgsoft mahjong ways 2 di sela istirahat scatter hitam mahjong wins 3 spin pasti jepe duta76 perihoki spin mahjong ways 2 pgsoft scatter hitam maxwin simbol mahjong wins 3 yang sering muncul di awal perihoki trik gampang menang mahjong wins cuan mahjong wins 3 tanpa henti pola spin taruhan kecil mahjong wins strategi kunci scatter hitam beruntun gacor total mahjong ways kemenangan maksimal mahjong ways kemenangan pria pekanbaru mahjong ways mahjong wins3 fenomena baru sumatera barat menangkan mahjong dengan lincah menembus batas keberuntungan mahjong ways menjajal keberuntungan di mahjong ways pola gratis mahjong ways1 scatter hitam senjata rahasia mahjong wins teknik spinning menguntungkan untuk scatter hitam analisis rtp tertinggi mahjong wins fenomena scatter hitam mahjong wins ibu rumah tangga dan keberuntungan mahjong keseruan main mahjong wins3 menang mahjong pengguna baru di sosial media menghargai setiap momen di mahjong ways serunya main mahjong di warung internet spin slow motion mancing scatter strategi jitu maxwin mahjong ways strategi jitu menang mahjong modal kecil jackpot besar anak kampung papua menggemparkan mahjong keajaiban scatter hitam mahjong ways keberhasilan joni mahjong wins kejaiban mahjong ways di ujung jalan ketua mahjong wins3 kehadiran kemenangan dimulai dari bali mahjong kehadiran yang menguntungkan mahjong menggila adat88 panduan kilat raih 108 juta tips memenangkan mahjong barista kopi menang 110 juta spin mahjong dakota76 scatter hitam mahjong wins 3 gagal cpns menang mahjong wins 3 rp120 juta kisah karyawan minimarket dapat thr lebih awal mahjong wins kisah pelajar sma kuasai mahjong wins 3 inspirasi sekolah kisah penjaga parkir tanah abang motor baru mahjong wins kisah sukses ibu rumah tangga bandung mahjong wins mahasiswa kkn beli iphone15 mahjong wins3 dakota mantan anak band influencer mahjong scatter hitam pola rtp senin gates of olympus guru matematika idola scatter hitam gampang meledak idola sensasi jackpot idola pola scatter hitam idola hasilkan jackpot dalam waktu singkat idola mahjong wins 3 bocor tukang cuci motor menemukan keberuntungan di mahjong
A PHP Error was encountered
Severity: Warning
Message: ini_set(): Headers already sent. You cannot change the session module's ini settings at this time
Filename: Session/Session.php
Line Number: 282
Backtrace:
File: /home/blogchuabenh/domains/freetuts.net/public_html/site/controllers/Main_controller.php
Line: 10
Function: __construct
File: /home/blogchuabenh/domains/freetuts.net/public_html/sources/index.php
Line: 299
Function: require_once
File: /home/blogchuabenh/domains/freetuts.net/public_html/index.php
Line: 26
Function: require_once
A PHP Error was encountered
Severity: Warning
Message: session_set_cookie_params(): Cannot change session cookie parameters when headers already sent
Filename: Session/Session.php
Line Number: 294
Backtrace:
File: /home/blogchuabenh/domains/freetuts.net/public_html/site/controllers/Main_controller.php
Line: 10
Function: __construct
File: /home/blogchuabenh/domains/freetuts.net/public_html/sources/index.php
Line: 299
Function: require_once
File: /home/blogchuabenh/domains/freetuts.net/public_html/index.php
Line: 26
Function: require_once
A PHP Error was encountered
Severity: Warning
Message: ini_set(): Headers already sent. You cannot change the session module's ini settings at this time
Filename: Session/Session.php
Line Number: 304
Backtrace:
File: /home/blogchuabenh/domains/freetuts.net/public_html/site/controllers/Main_controller.php
Line: 10
Function: __construct
File: /home/blogchuabenh/domains/freetuts.net/public_html/sources/index.php
Line: 299
Function: require_once
File: /home/blogchuabenh/domains/freetuts.net/public_html/index.php
Line: 26
Function: require_once
A PHP Error was encountered
Severity: Warning
Message: ini_set(): Headers already sent. You cannot change the session module's ini settings at this time
Filename: Session/Session.php
Line Number: 314
Backtrace:
File: /home/blogchuabenh/domains/freetuts.net/public_html/site/controllers/Main_controller.php
Line: 10
Function: __construct
File: /home/blogchuabenh/domains/freetuts.net/public_html/sources/index.php
Line: 299
Function: require_once
File: /home/blogchuabenh/domains/freetuts.net/public_html/index.php
Line: 26
Function: require_once
A PHP Error was encountered
Severity: Warning
Message: ini_set(): Headers already sent. You cannot change the session module's ini settings at this time
Filename: Session/Session.php
Line Number: 315
Backtrace:
File: /home/blogchuabenh/domains/freetuts.net/public_html/site/controllers/Main_controller.php
Line: 10
Function: __construct
File: /home/blogchuabenh/domains/freetuts.net/public_html/sources/index.php
Line: 299
Function: require_once
File: /home/blogchuabenh/domains/freetuts.net/public_html/index.php
Line: 26
Function: require_once
A PHP Error was encountered
Severity: Warning
Message: ini_set(): Headers already sent. You cannot change the session module's ini settings at this time
Filename: Session/Session.php
Line Number: 316
Backtrace:
File: /home/blogchuabenh/domains/freetuts.net/public_html/site/controllers/Main_controller.php
Line: 10
Function: __construct
File: /home/blogchuabenh/domains/freetuts.net/public_html/sources/index.php
Line: 299
Function: require_once
File: /home/blogchuabenh/domains/freetuts.net/public_html/index.php
Line: 26
Function: require_once
A PHP Error was encountered
Severity: Warning
Message: ini_set(): Headers already sent. You cannot change the session module's ini settings at this time
Filename: Session/Session.php
Line Number: 317
Backtrace:
File: /home/blogchuabenh/domains/freetuts.net/public_html/site/controllers/Main_controller.php
Line: 10
Function: __construct
File: /home/blogchuabenh/domains/freetuts.net/public_html/sources/index.php
Line: 299
Function: require_once
File: /home/blogchuabenh/domains/freetuts.net/public_html/index.php
Line: 26
Function: require_once
A PHP Error was encountered
Severity: Warning
Message: ini_set(): Headers already sent. You cannot change the session module's ini settings at this time
Filename: Session/Session.php
Line Number: 375
Backtrace:
File: /home/blogchuabenh/domains/freetuts.net/public_html/site/controllers/Main_controller.php
Line: 10
Function: __construct
File: /home/blogchuabenh/domains/freetuts.net/public_html/sources/index.php
Line: 299
Function: require_once
File: /home/blogchuabenh/domains/freetuts.net/public_html/index.php
Line: 26
Function: require_once
A PHP Error was encountered
Severity: Warning
Message: ini_set(): Headers already sent. You cannot change the session module's ini settings at this time
Filename: drivers/Session_files_driver.php
Line Number: 108
Backtrace:
File: /home/blogchuabenh/domains/freetuts.net/public_html/site/controllers/Main_controller.php
Line: 10
Function: __construct
File: /home/blogchuabenh/domains/freetuts.net/public_html/sources/index.php
Line: 299
Function: require_once
File: /home/blogchuabenh/domains/freetuts.net/public_html/index.php
Line: 26
Function: require_once
A PHP Error was encountered
Severity: Warning
Message: session_set_save_handler(): Cannot change save handler when headers already sent
Filename: Session/Session.php
Line Number: 110
Backtrace:
File: /home/blogchuabenh/domains/freetuts.net/public_html/site/controllers/Main_controller.php
Line: 10
Function: __construct
File: /home/blogchuabenh/domains/freetuts.net/public_html/sources/index.php
Line: 299
Function: require_once
File: /home/blogchuabenh/domains/freetuts.net/public_html/index.php
Line: 26
Function: require_once
A PHP Error was encountered
Severity: Warning
Message: session_start(): Cannot start session when headers already sent
Filename: Session/Session.php
Line Number: 143
Backtrace:
File: /home/blogchuabenh/domains/freetuts.net/public_html/site/controllers/Main_controller.php
Line: 10
Function: __construct
File: /home/blogchuabenh/domains/freetuts.net/public_html/sources/index.php
Line: 299
Function: require_once
File: /home/blogchuabenh/domains/freetuts.net/public_html/index.php
Line: 26
Function: require_once
Tạo một component TimeTrackingForm trong ReactJS
REACTJS EXAMPLE
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
Tạo một component TimeTrackingForm trong ReactJS
Cách tạo một component TimeTrackingForm trong ReactJS để thực hiện bài tập về Forms và Controlled Components. Trong bài tập này, mình sẽ tạo TimeTrackingForm trong ReactJS cho phép người dùng theo dõi thời gian làm việc, bao gồm các ô nhập liệu cho giờ bắt đầu, giờ kết thúc và mô tả công việc.
TimeTrackingForm trong ReactJS
Đầu tiên, hãy tạo một file có tên TimeTrackingForm.js
trong thư mục của bạn và thêm mã sau vào đó:
import React, { useState } from 'react';
import './TimeTrackingForm.css';
const TimeTrackingForm = () => {
const [startTime, setStartTime] = useState('');
const [endTime, setEndTime] = useState('');
const [description, setDescription] = useState('');
const handleStartTimeChange = (e) => {
setStartTime(e.target.value);
};
const handleEndTimeChange = (e) => {
setEndTime(e.target.value);
};
const handleDescriptionChange = (e) => {
setDescription(e.target.value);
};
const handleSubmit = (e) => {
e.preventDefault();
// Đoạn này bạn có thể thêm logic để xử lý dữ liệu, ví dụ: gửi dữ liệu đến server, lưu vào state của ứng dụng, ...
console.log('Start Time:', startTime);
console.log('End Time:', endTime);
console.log('Description:', description);
};
return (
<div className="time-tracking-form-container">
<h2>Time Tracking Form</h2>
<form onSubmit={handleSubmit}>
<div className="form-group">
<label htmlFor="start-time">Start Time:</label>
<input
type="time"
id="start-time"
value={startTime}
onChange={handleStartTimeChange}
required
/>
</div>
<div className="form-group">
<label htmlFor="end-time">End Time:</label>
<input
type="time"
id="end-time"
value={endTime}
onChange={handleEndTimeChange}
required
/>
</div>
<div className="form-group">
<label htmlFor="description">Description:</label>
<textarea
id="description"
value={description}
onChange={handleDescriptionChange}
required
></textarea>
</div>
<button type="submit">Submit</button>
</form>
</div>
);
};
export default TimeTrackingForm;
Tiếp theo, tạo một file CSS có tên TimeTrackingForm.css
trong cùng thư mục và thêm các kiểu CSS sau:
/* TimeTrackingForm.css */
.time-tracking-form-container {
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);
}
h2 {
text-align: center;
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
font-weight: bold;
}
input[type="time"],
textarea {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
background-color: #3498db;
color: white;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
width: 100%;
}
button:hover {
background-color: #2980b9;
}
Cuối cùng, để sử dụng component TimeTrackingForm
, bạn có thể import nó vào trong file App.js hoặc bất kỳ file nào bạn muốn và sử dụng như sau:
import React from 'react';
import TimeTrackingForm from './TimeTrackingForm';
import './TimeTrackingForm.css'; // Import CSS file
const App = () => {
return (
<div className="App">
<h1>Time Tracking App</h1>
<TimeTrackingForm />
</div>
);
};
export default App;
Đây là cách bạn có thể tạo một ứng dụng Time Tracking đơn giản trong ReactJS, cho phép người dùng nhập liệu về thời gian bắt đầu, kết thúc và mô tả công việc, và sau đó xử lý dữ liệu đó.
Bài giải
-------------------- ######## --------------------
Câu hỏi thường gặp liên quan:
Cùng chuyên mục: