.setState（）：在按鈕上點擊一個對象數組過濾一個人點擊

Question

在下面的代碼中，我試圖從點擊他們名字旁邊的刪除按鈕時最終將成爲組織結構圖的人中刪除一個人。目前，沒有任何反應。我最近來的是當點擊任何一個刪除按鈕時全部5個人被刪除，但我只希望單擊刪除誰的按鈕。我覺得我正在製作更多的JS錯誤，而不是React錯誤。

See the full code sandbox here.

任何幫助，將不勝感激，謝謝！

import React from "react"; 
import { Component } from "react"; 

const list = [ 
    { 
    name: "Person 1", 
    phone: "123-4567", 
    itemId: 11 
    }, 
    { 
    name: "Person 2", 
    phone: "123-4567", 
    itemId: 12 
    }, 
    { 
    name: "Person 3", 
    phone: "123-4567", 
    itemId: 23 
    }, 
    { 
    name: "Person 4", 
    phone: "123-4567", 
    itemId: 34 
    }, 
    { 
    name: "Person 5", 
    phone: "123-4567", 
    itemId: 45 
    } 
]; 

class Entry extends Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     list: list 
    }; 
    this.handleClick = this.handleClick.bind(this); 
    } 

    handleClick(e) { 
    this.setState({ 
     list: this.state.list.filter(function(person) { 
     return person !== e.target.value; 
     }) 
    }); 
    } 

    render() { 
    return (
     <div> 
     {this.state.list.map(item => 
      <tr key={item.itemId}> 
      <td> 
       {item.name} 
      </td> 
      <td> 
       {item.phone} 
      </td> 
      <td> 
       <a className="delete" onClick={this.handleClick} /> 
      </td> 
      </tr> 
     )} 
     </div> 
    ); 
    } 
} 

export default Entry; 

Answer 1

點擊事件沒有價值，你可以傳遞的itemId：

onClick={() => this.handleClick(item.itemId)} 

那麼你​​應該是這樣的：

handleClick(itemId) { 
    this.setState({ 
     list: this.state.list.filter(function(person) { 
     return person.itemId !== itemId; 
     }) 
    }); 
    } 

https://codesandbox.io/s/mo2l8z7469

Answer 2

//import React from 'react'; 
 
//import ReactDOM from 'react-dom'; 
 

 
const list = [ 
 
    { 
 
    name: "Person 1", 
 
    phone: "123-4567", 
 
    itemId: 11 
 
    }, 
 
    { 
 
    name: "Person 2", 
 
    phone: "123-4567", 
 
    itemId: 12 
 
    }, 
 
    { 
 
    name: "Person 3", 
 
    phone: "123-4567", 
 
    itemId: 23 
 
    }, 
 
    { 
 
    name: "Person 4", 
 
    phone: "123-4567", 
 
    itemId: 34 
 
    }, 
 
    { 
 
    name: "Person 5", 
 
    phone: "123-4567", 
 
    itemId: 45 
 
    } 
 
]; 
 

 
class Entry extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 

 
    this.state = { 
 
     list: list 
 
    }; 
 
    this.handleClick = this.handleClick.bind(this); 
 
    } 
 

 
    handleClick(item) { 
 
    let filterList = this.state.list.filter((user) => { 
 
     if(user.itemId === item.itemId) { 
 
      return false; 
 
     } 
 
     return true; 
 
    }) 
 
    this.setState({ 
 
     list: filterList 
 
    }); 
 
    } 
 

 
    render() { 
 
    return (
 
     <div> 
 
     <table> 
 
     <tbody> 
 
     {this.state.list.map(item => 
 
      <tr key={item.itemId}> 
 
      <td> 
 
       {item.name} 
 
      </td> 
 
      <td> 
 
       {item.phone} 
 
      </td> 
 
      <td> 
 
       <button className="delete" onClick={() => this.handleClick(item)} >Del</button> 
 
      </td> 
 
      </tr> 
 
     )} 
 
     </tbody> 
 
     </table> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(
 
    <Entry />, 
 
    document.getElementById('app') 
 
);

delete

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id="app"></div>

Answer 3

上述兩種解決方案違反的最佳實踐之一或者我應該說反應的必要做法，我們應該使用property initializer syntax，這是通過上面定義的函數，而不是通過內部的箭頭功能道具，你可以閱讀它在這裏的最後一段https://facebook.github.io/react/docs/handling-events.html

class Entry extends Component { 
    /* your handler method */ 
    handleDelete(itemId){ 
    return() => { 
     this.setState({ 
     /* logic to filter deleted item from old state */ 
     }); 
    } 
    } 
    /* render method */ 
    render() { 
    return (
     <div> 
     {/* passing onDelete callback */} 
     <a className="delete" onClick={this.handleClick(item.id)} /> 
     </div> 
    ) 
    } 
}