如何做阿賈克斯刪除反應

我想知道如果刪除工作像添加，但它沒有。即時通訊使用fetch方法我不是在反應熟悉的AJAX，所以我不能清楚地確定什麼是錯我的代碼如何做阿賈克斯刪除反應

所以這裏是我的代碼的onclick刪除

deleteEmployee(id) { 
    jQuery.support.cors = true; 
    fetch('http://localhost:5118/api/employeedetails/DeleteEmployeeDetail/'+ id, { 
     method: 'GET' 
    }).then(function(response) { 
    // history.go(0); 
     var jsonReturnedValue = [...this.state.jsonReturnedValue]; 
     this.setState({jsonReturnedValue}) 
    }).catch(function(err) { 
    // Error :(
    }); 
}

這是表

< div className="container"> 
      <h1> Listof Employees </h1> 
      <button className ='btn btn-warning right ' data-toggle="modal" data-target="#AddEmployee"> Add an Employee</button> 
      <table className= "table table-bordered" id="result"> 
       <tbody> 
       <tr> 
         <th>ID</th> 
         <th>Name</th> 
         <th>Address</th> 
         <th>Update</th> 
         <th>Delete</th> 
       </tr> 
        {jsonReturnedValue.map((d,i) => this.renderItem(d,i))} 
       </tbody> 

      </table> 
      </div>

代碼對於其中按鈕位於

renderItem(d, i) { 
    return <tr key={i} > 
    <td> {d.Employee_ID} </td> 
    <td>{d.Employee_Name}</td> 
    <td>{d.Address }</td> 
    <td><center><button className ="btn btn-info" onClick={this.handleOnclick.bind(this, d.Employee_ID, d.Employee_Name, d.Address , d.Department)} data-toggle="modal" data-target="#UpdateEmployee">Edit</button></center></td> 
    <td><center><input type="submit" className ="btn btn-danger" onClick={this.deleteEmployee.bind(this, d.Employee_ID)} value="Delete"/></center></td> 
</tr> 
}

PS數據的主叫

代碼：本身是工作的代碼，以便在控制檯說，沒有什麼是錯的，但我想它，當我點擊它表重裝

來源

2017-05-24 P.Macs

**開發人員**工具控制檯或網絡選項卡中的任何有用輸出？ –

該代碼本身工作，所以它什麼都沒說，但我想要它，當我點擊它表重新加載 –

你能顯示你的反應組件嗎？不只是方法，所以我們會知道你是如何處理這個狀態的。 – ickyrr

第1步 - 你需要調用指數在功能deleteEmployee(id,index)

第2步 - 呼叫請求端

deleteEmployee(id, index) { 
     jQuery.support.cors = true; 
     fetch('http://localhost:5118/api/employeedetails/DeleteEmployeeDetail/'+ id, { 
      method: 'GET' 
     }).then(function(response) { 
     // history.go(0); 
      var jsonReturnedValue = [...this.state.jsonReturnedValue]; 
      this.setState({jsonReturnedValue}) 
     }).catch(function(err) { 
     // Error :(
     }); 

    **this.state.jsonReturnedValue.splice(index, 1)** 
///You can call as empty   
     this.setState({}) 

    }

EDIT /////

而且，渲染不應該℃後剪接方法作爲一項功能。您可以使用這樣的

 {jsonReturnedValue.map((d,i) => <tr key={i} > 
    <td> {d.Employee_ID} </td> 
    <td>{d.Employee_Name}</td> 
    <td>{d.Address }</td> 
    <td><center><button className ="btn btn-info" onClick={this.handleOnclick.bind(this, d.Employee_ID, d.Employee_Name, d.Address , d.Department)} data-toggle="modal" data-target="#UpdateEmployee">Edit</button></center></td> 
    <td><center><input type="submit" className ="btn btn-danger" onClick={this.deleteEmployee.bind(this, d.Employee_ID)} value="Delete"/></center></td> 
</tr>)}

然後

onClick={this.deleteEmployee.(d.Employee_ID, i)}

您可以在構造函數中

constructor(props) { 
     super(props) 

     this.state = { 
      example: "" 
     } 
     this.deleteEmployee = this.deleteEmployee.bind(this) 
    }

來源

2017-05-24 02:49:57 Cracked

嘿它的工作，但它不拼接ID ....只有第一排 –

嘗試我的方式！我編輯了答案。 – Cracked

@Cracked - 你爲什麼說他不應該將表格行渲染作爲一個函數？這對我來說似乎是完全合理的模塊化。製作一個單獨的組件可能會更好，但對於一次性表格，這可能是好的。 – speckledcarp

它看起來像你存儲this.state.jsonReturnedValue你的員工名單調用bind。在您的deleteEmployee函數中，您創建了該數組的副本，但不要更改任何值。據推測，您希望在調用this.setState之前使用更新後的陣列刪除已刪除員工的行。

來源

2017-05-24 02:54:18 speckledcarp

如何做阿賈克斯刪除反應

回答

相關問題