解释如何在 REACT 中删除 bootstrap-card

Question

import React, { Component } from "react";
import FriendCard from "./components/FriendCard";
import Wrapper from "./components/Wrapper";
import Title from "./components/Title";
import friends from "./friends.json";
import "./App.css";

class App extends Component {
  // Setting this.state.friends to the friends json array
  state = {
    friends
  };

  removeFriend = id => {
    // Filter this.state.friends for friends with an id not equal to the id being removed
    const friends = this.state.friends.filter(friend => friend.id !== id);
    // Set this.state.friends equal to the new friends array
    this.setState({ friends });
  };

  // Map over this.state.friends and render a FriendCard component for each friend object
  render() {
    return (
      <Wrapper>
        <Title>Friends List</Title>
        {this.state.friends.map(friend => (
          <FriendCard
            removeFriend={this.removeFriend}
            id={friend.id}
            key={friend.id}
            name={friend.name}
            image={friend.image}
            occupation={friend.occupation}
            location={friend.location}
          />
        ))}
      </Wrapper>
    );
  }
}

export default App;

下面的代码片段允许我点击 card (bootstrap-css) 并删除 card。有用！但我的逻辑思维或方法是 on click, delete this card 。我没有在这段代码中看到它，但它有效。我没有编程背景。

我希望有人能向我解释一下，如果您愿意的话，可以用通俗易懂的术语来理解它。也许再给我一些例子。提前致谢。

 removeFriend = id => {

    const friends = this.state.friends.filter(friend => friend.id !== 
id);
     this.setState({ friends });
  };

下面的总数：

这是好友组件：

import React from "react";
import "./FriendCard.css";

const FriendCard = props => (
  <div className="card">
    <div className="img-container">
      <img alt={props.name} src={props.image} />
    </div>
    <div className="content">
      <ul>
        <li>
          <strong>Name:</strong> {props.name}
        </li>
        <li>
          <strong>Occupation:</strong> {props.occupation}
        </li>
        <li>
          <strong>Location:</strong> {props.location}
        </li>
      </ul>
    </div>
    <span onClick={() => props.removeFriend(props.id)} className="remove">
      
    </span>
  </div>
);

export default FriendCard;

Answer 1

所以你在这里发布的部分

removeFriend = id => {
  const friends = this.state.friends.filter(friend => friend.id !== id);
  this.setState({ friends });
};

是你逻辑思维的最后一部分删除这张卡片

这是点击时调用的函数，但不处理实际的点击。它需要一个 id 作为输入，并将你的朋友状态设置为与给定 id 匹配的所有元素。这是由过滤器功能完成的，您可以在此处阅读更多信息 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

您的下一部分逻辑思维 点击将在 FriendCard 组件中处理

在您的 App 组件中，此行将您的处理函数作为属性

注入到 FriendsCard 组件中

removeFriends={this.removeFriends}

这意味着只要单击 FriendCard 组件，您的 removeFriends 函数就会被调用。

实际的点击处理是在您的 FriendCard 组件中完成的这一行

<span onClick={() => props.removeFriend(props.id)} className="remove">

Answer 2

您的示例不完整。要真正理解它，您需要查看 <FriendCard> 组件内部发生的情况。然后你会注意到逻辑可能真的像你想象的那样工作。

您看到 FriendCard 组件在第 2 行导入。它在第 22 行开始的 render 函数中被引用。

App 组件有一个包含 friends 属性的状态对象。对于状态对象内的每个朋友，我们通过在第 27 行中使用 map 方法遍历状态来渲染一个 FriendCard 组件。You can read more over the map method here.

我们将几个属性传递给 FriendCard 组件。我们传递给 FriendCard 组件的属性之一是第 14 行中定义的方法 removeFriend。

这个removeFriend方法实际上负责从我们的state对象中删除一个朋友。如您所见，它接收一个 id 参数并为所有 id 与我们传入的 id 不同的朋友过滤 state 对象（基本上删除我们传递给该方法的 id ).

该 removeFriend 方法可能绑定到 FriendCard 组件内的 click 处理程序，并在我们单击它时调用。

Answer 3

以上两个答案都是正确的。我还想补充一点，当使用 this.setState 函数更新状态属性时，这会触发 React 调用您组件的渲染函数，该函数将 re-render 您朋友的列表基于您的新状态属性（即过滤后的好友列表）。

解释如何在 REACT 中删除 bootstrap-card

Explaining how to remove a bootstrap-card in REACT

javascript

if-statement

handler

reactjs