A kiválasztott változat és az aktuális verzió közötti különbségek a következők.
Előző változat mindkét oldalon Előző változat Következő változat | Előző változat | ||
oktatas:web:react:tablazat [2022/12/26 17:00] admin [Táblázat sorának törlése dinamikusan] |
oktatas:web:react:tablazat [2022/12/26 20:53] (aktuális) admin [Szerkesztés] |
||
---|---|---|---|
Sor 158: | Sor 158: | ||
</code> | </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> |