Különbségek

A kiválasztott változat és az aktuális verzió közötti különbségek a következők.

--- oktatas:web:react:tablazat [2022/12/26 17:00] – [Táblázat sorának törlése dinamikusan] admin
+++ oktatas:web:react:tablazat [2022/12/26 20:53] (aktuális) – [Szerkesztés] admin
@@ Sor 98: / Sor 98: @@
 ===== Táblázat sorának törlése dinamikusan =====
-{{:oktatas:web:react:tablazat_torlheto-sorokkal.png|}}
 {{:oktatas:web:react:tablazat_torolheto-sorokkal.png|}}
@@ Sor 158: / Sor 158: @@
 </code>
+===== Szerkesztés =====
+{{:oktatas:web:react:react_table_edit.png|}}
+<code javascript App.js>
+import './App.css';
+import { useState } from 'react';
+function App() {
+  const employeesOrigi = [
+    {id: 1, name: "Csendes Pál", salary: 435},
+    {id: 2, name: "Erős István", salary: 397},
+    {id: 3, name: "Látó Gábor", salary: 374}
+  ]
+  const [employees, setEmployees] = useState(employeesOrigi);
+  const [modifyVisible, setModifyVisible] = useState(false);
+  const [idForModify, setIdForModify] = useState();
+  const [nameForModify, setNameForModify] = useState();
+  const [salaryForModify, setSalaryForModify] = useState();
+  const [index, setIndex] = useState();
+  function removeEmployee(id) {
+    let tomb = employees.filter((item) => item.id !== id);
+    setEmployees(tomb);
+  }
+  function modifyEmployee(employee, index) {
+    setModifyVisible(true);
+    setIdForModify(employee.id);
+    setNameForModify(employee.name);
+    setSalaryForModify(employee.salary);
+    setIndex(index);
+    console.log(index);
+  }
+  function onClickSaveButton() {
+    console.log("mentés...");
+    const emps = employees;
+    emps[index].name = nameForModify;
+    emps[index].salary = salaryForModify;
+    setEmployees(emps);
+    setModifyVisible(false);
+  }
+  return (
+    <div className="App">
+      {
+        modifyVisible &&
+        <div>
+          <h1>Módosítás</h1>
+          <div>
+            <label>Id</label>
+            <input type="text" value={idForModify}
+            onChange={e => setIdForModify(e.target.value)} />
+          </div>
+          <div>
+            <label>Név</label>
+            <input type="text" value={nameForModify}
+            onChange={e => setNameForModify(e.target.value)} />
+          </div>
+          <div>
+            <label>Fizetés</label>
+            <input type="text" value={salaryForModify}
+            onChange={e => setSalaryForModify(e.target.value)} />
+          </div>
+          <input type="hidden" value={index} />
+          <button onClick={onClickSaveButton}>Mentés</button>
+        </div>
+      }
+      <table>
+        <thead>
+          <tr>
+            <th>#</th>
+            <th>Név</th>
+            <th>Fizetés</th>
+          </tr>
+        </thead>
+        <tbody>
+          {employees.map( (employee, index) => {
+            return (
+              <tr key={employee.id}>
+                <td>{employee.id}</td>
+                <td>{employee.name}</td>
+                <td>{employee.salary}</td>
+                <td>
+                  <button onClick={ () => removeEmployee(employee.id)}>Törlés</button>
+                </td>
+                <td>
+                  <button onClick={ () => modifyEmployee(employee, index)}>Módosítás</button>
+                </td>
+              </tr>
+            )
+          })}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+export default App;
+</code>