.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 应该是这样的：

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，它传递上面定义的函数而不是在 prop you 中传递箭头函数可以在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>
    )
  }
}

.setState()：在单击按钮时从对象数组中过滤一个人

.setState(): Filtering a person from an array of objects on button click

javascript

reactjs