Ich möchte Tabellenzeile in reactjs bearbeiten und löschen

Question

lassen Sie staffTemplate = staffList? staffList.map (function (listItem, key) {

return (<tr key={key}> 
    <td><input className={this.state.editMode && "input-editmode" } defaultValue={listItem.name} readOnly={this.state.editMode ? false : true} /></td> 
    <td>{listItem.lctn}</td> 
    <td>{listItem.allPlaces}</td> 
    <td>{listItem.role}</td> 
    <td>{listItem.hrly_rte}</td> 
    <td>{listItem.password}</td> 
    <td>{listItem.swipe_code}</td> 
    <td>{this.state.editMode ? <button data-id={listItem.id} onClick={this.updateUser} className="edit btn btn-primary ">Update</button>:<button data-id={listItem.id} onClick={this.editUser} className="edit btn btn-primary ">edit</button>}</td><td>{this.state.editMode ? <button className="btn btn-warning " data-id={listItem.id} onClick={this.cancel}>Cancel</button> : <button data-id={listItem.id} className="delete btn btn-danger" onClick={this.deltStaff}>delete</button> }</td></tr>) 
}, this):("No Data Found"); 


    return staffTemplate ; 

Answer 1

Wenn staffList ist ein Array in Zustand gehalten, alles, was Sie tun müssen, ist das gewünschte Element entfernen und this.setState() mit Ihrem neuen Array aufrufen. neu rendern reagieren Ihre Komponente und das von Ihnen entfernte Element werden entfernt