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

以上解决方案都违反了最佳实践之一，或者我应该说反应的基本实践，我们应该使用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>
    )
  }
}

Answer 3

＆＃13;

//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')
);

＆＃13;

delete

＆＃13;

<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>

＆＃13;

.setState（）：在按钮单击时从对象数组中过滤人物

3 个答案: