我想在reactjs中編輯和刪除表格行

Question

let staffTemplate = staffList？ staffList.map（函數（的listItem，鍵）{

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

如果staffList是保持狀態的陣列，所有你需要做的是去除所需的元素，並調用this.setState()用新的陣列。陣營將重新呈現您的組件和您移除的元素將被刪除。