จำนวนคนเข้าดู: 133

Code สร้างแบบฟอร์มรับข้อมูลพนักงาน List of object Employee

ตัวอย่างนี้พัฒนามาจาก code เดิม สร้างแบบฟอร์มรับข้อมูลพนักงาน Array of Employee object [JavaScript]

โดยมีการใช้งาน React State คลิ๊ก เข้ามาเกี่ยว

Code สร้างแบบฟอร์มรับข้อมูลพนักงาน Array of Employee object [JavaScript]

ได้มีการปรับจาก JavaScript ให้เป็น React ตัวอย่างการสร้าง React ด้านล่างครับ

React สอนการติดตั้ง React Step-By-Step

ทำการติดตั้ง React เสร็จแล้ว ให้สร้าง Component ขึ้นมาตามตัวอย่างในภาพด้านล่าง

ตัวอย่างไฟล์ EmployeeForm.js

import React, { useState } from 'react';

const EmployeeForm = ({ addData }) => {
  const [formData, setFormData] = useState({
    name: '',
    lastname: '',
    age: 0,
    position: '',
    workingHours: 0,
    salary: 0,
  });

  const handleSubmit = (e) => {
    e.preventDefault();
    addData(formData);
    resetForm();
  };

  const resetForm = () => {
    setFormData({
      name: '',
      lastname: '',
      age: 0,
      position: '',
      workingHours: 0,
      salary: 0,
    });
  };

  return (
    <div className="container mt-4">
      <div className="card p-4">
        <h2 className="text-center mb-4">Employee Data Form</h2>
        <form onSubmit={handleSubmit}>
          <div className="row mb-3">
            <div className="col-md-6">
              <label htmlFor="name" className="form-label fw-bold">Name:</label>
              <input
                type="text"
                id="name"
                name="name"
                className="form-control"
                value={formData.name}
                onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                required
              />
            </div>
            <div className="col-md-6">
              <label htmlFor="lastname" className="form-label fw-bold">Lastname:</label>
              <input
                type="text"
                id="lastname"
                name="lastname"
                className="form-control"
                value={formData.lastname}
                onChange={(e) => setFormData({ ...formData, lastname: e.target.value })}
                required
              />
            </div>
          </div>

          <div className="row mb-3">
            <div className="col-md-6">
              <label htmlFor="age" className="form-label fw-bold">Age:</label>
              <input
                type="number"
                id="age"
                name="age"
                className="form-control"
                value={formData.age}
                onChange={(e) => setFormData({ ...formData, age: e.target.value })}
                required
              />
            </div>
            <div className="col-md-6">
              <label htmlFor="position" className="form-label fw-bold">Position:</label>
              <input
                type="text"
                id="position"
                name="position"
                className="form-control"
                value={formData.position}
                onChange={(e) => setFormData({ ...formData, position: e.target.value })}
                required
              />
            </div>
          </div>

          <div className="row mb-3">
            <div className="col-md-6">
              <label htmlFor="workingHours" className="form-label fw-bold">Working Hours:</label>
              <input
                type="number"
                id="workingHours"
                name="workingHours"
                className="form-control"
                value={formData.workingHours}
                onChange={(e) => setFormData({ ...formData, workingHours: e.target.value })}
                required
              />
            </div>
            <div className="col-md-6">
              <label htmlFor="salary" className="form-label fw-bold">Salary:</label>
              <input
                type="number"
                id="salary"
                name="salary"
                className="form-control"
                value={formData.salary}
                onChange={(e) => setFormData({ ...formData, salary: e.target.value })}
                required
              />
            </div>
          </div>

          <div className="d-grid">
            <button type="submit" className="btn btn-primary btn-lg">
              Save Data
            </button>
          </div>
        </form>
      </div>
    </div>
  );
};

export default EmployeeForm;

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

import React, { useState } from 'react';

const EmployeeForm = ({ addData }) => {

const [formData, setFormData] = useState({

name: '',

lastname: '',

age: 0,

position: '',

workingHours: 0,

salary: 0,

});

const handleSubmit = (e) => {

e.preventDefault();

addData(formData);

resetForm();

};

const resetForm = () => {

setFormData({

name: '',

lastname: '',

age: 0,

position: '',

workingHours: 0,

salary: 0,

});

};

return (

<h2 className="text-center mb-4">Employee Data Form</h2>

<input

type="text"

id="name"

name="name"

className="form-control"

value={formData.name}

onChange={(e) => setFormData({ ...formData, name: e.target.value })}

required

</div>

<label htmlFor="lastname" className="form-label fw-bold">Lastname:</label>

<input

type="text"

id="lastname"

name="lastname"

className="form-control"

value={formData.lastname}

onChange={(e) => setFormData({ ...formData, lastname: e.target.value })}

required

</div>

<input

type="number"

id="age"

name="age"

className="form-control"

value={formData.age}

onChange={(e) => setFormData({ ...formData, age: e.target.value })}

required

</div>

<label htmlFor="position" className="form-label fw-bold">Position:</label>

<input

type="text"

id="position"

name="position"

className="form-control"

value={formData.position}

onChange={(e) => setFormData({ ...formData, position: e.target.value })}

required

</div>

<label htmlFor="workingHours" className="form-label fw-bold">Working Hours:</label>

<input

type="number"

id="workingHours"

name="workingHours"

className="form-control"

value={formData.workingHours}

onChange={(e) => setFormData({ ...formData, workingHours: e.target.value })}

required

</div>

<label htmlFor="salary" className="form-label fw-bold">Salary:</label>

<input

type="number"

id="salary"

name="salary"

className="form-control"

value={formData.salary}

onChange={(e) => setFormData({ ...formData, salary: e.target.value })}

required

</div>

Save Data

</button>

</div>

</form>

</div>

);

};

export default EmployeeForm;

ตัวอย่างไฟล์ EmployeeList.js

import React from 'react';

const EmployeeList = ({ employees, onDelete }) => (
  <div className="container mt-4 p-4">
    <h4>Employee List</h4>
    <table className="table">
      <thead>
        <tr>
          <th>Name</th>
          <th>Lastname</th>
          <th>Age</th>
          <th>Position</th>
          <th>WorkingHours</th>
          <th>Salary</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        {employees.map((employee, index) => (
          <tr key={index}>
            <td>{employee.name}</td>
            <td>{employee.lastname}</td>
            <td>{employee.age}</td>
            <td>{employee.position}</td>
            <td>{employee.workingHours}</td>
            <td>{employee.salary}</td>
            <td>
              <button
                className="btn btn-danger"
                onClick={() => onDelete(index)}
              >
                Delete
              </button>
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  </div>
);

export default EmployeeList;

import React from 'react';

const EmployeeList = ({ employees, onDelete }) => (

<h4>Employee List</h4>

<thead>

<tr>

<th>Lastname</th>

<th>Position</th>

<th>WorkingHours</th>

<th>Salary</th>

<th>Action</th>

</tr>

</thead>

<tbody>

{employees.map((employee, index) => (

<td>{employee.name}</td>

<td>{employee.lastname}</td>

<td>{employee.age}</td>

<td>{employee.position}</td>

<td>{employee.workingHours}</td>

<td>{employee.salary}</td>

<td>

<button

className="btn btn-danger"

onClick={() => onDelete(index)}

Delete

</button>

</td>

</tr>

))}

</tbody>

</table>

</div>

);

export default EmployeeList;

แล้วทำการเรียกใช้งานผ่านไฟล์ App.js

import './App.css';
import React, { useState } from 'react';

import EmployeeForm from './components/EmployeeForm';
import EmployeeList from './components/EmployeeList';

function App() {
  const [employees, setEmployees] = useState([]);
  const callBackAddData = (formData) => {
    const newEmployee = { ...formData };
    setEmployees((prevEmployees) => [...prevEmployees, newEmployee]);
  };

  const handleDelete = (index) => {
    const updatedEmployees = [...employees];
    updatedEmployees.splice(index, 1);
    setEmployees(updatedEmployees);
  };

  return (
    <div>
      <EmployeeForm addData={callBackAddData} />
      <EmployeeList employees={employees} onDelete={handleDelete}/>
    </div>
  );
}

export default App;

import './App.css';

import React, { useState } from 'react';

import EmployeeForm from './components/EmployeeForm';

import EmployeeList from './components/EmployeeList';

function App() {

const [employees, setEmployees] = useState([]);

const callBackAddData = (formData) => {

const newEmployee = { ...formData };

setEmployees((prevEmployees) => [...prevEmployees, newEmployee]);

};

const handleDelete = (index) => {

const updatedEmployees = [...employees];

updatedEmployees.splice(index, 1);

setEmployees(updatedEmployees);

};

return (

<div>

</div>

);

}

export default App;

ผลลัพธ์ที่ได้

วัยวุฒิ ชุมเมืองปัก

สนใจจ้างพัฒนาระบบ เขียนระบบ
ทำเว็บไซต์ รับสอนเขียนโปรแกรม
inbox มาที่เพจ หรือติดต่อ 098-373-8651

ช่องทางการชำระเงิน
เงินสด หรือ e-banking
ธนาคารกสิกรไทย
เลขบัญชี : 0951168564
ชื่อบัญชี : นายวัยวุฒิ ชุมเมืองปัก

React React State

วัยวุฒิ ชุมเมืองปัก

สนใจจ้างพัฒนาระบบ เขียนระบบ ทำเว็บไซต์ รับสอนเขียนโปรแกรม inbox มาที่เพจ หรือติดต่อ 098-373-8651 ช่องทางการชำระเงิน เงินสด หรือ e-banking ธนาคารกสิกรไทย เลขบัญชี : 0951168564 ชื่อบัญชี : นายวัยวุฒิ ชุมเมืองปัก

Code สร้างแบบฟอร์มรับข้อมูลพนักงาน List of object Employee [React]

Code สร้างแบบฟอร์มรับข้อมูลพนักงาน List of object Employee

Related

วัยวุฒิ ชุมเมืองปัก

Code สร้างแบบฟอร์มรับข้อมูลพนักงาน List of object Employee

Share this:

Related

วัยวุฒิ ชุมเมืองปัก