.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> 
    ) 
    } 
}