React组件传值：点击Card组件删除按钮传递动物名至App组件

组件层级为 App->Animal->Card，Card 组件的删除按钮点击时，需要把对应动物名称传递到 App 组件以实现卡片删除，请问如何将 animal.name 传入 removeHandler 函数？

核心思路是通过逐层传递绑定了动物名称的回调函数，实现子组件到父组件的数据传递，以下是三个组件的具体修改：

1. 修改 App 组件 #

原代码中传递 removeCard 时作用域不存在 animal 变量，需要改为传递一个接收 name 参数的函数，让子组件可以传入具体动物名称：

import React, { Component } from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import { animals, birds } from "./component/Data";
import Navbar from "./component/Navbar";
import Home from "./component/Home";
import Animal from "./component/Animal";
import Bird from "./component/Bird";
import About from "./component/About";
import "./App.css";

export default class App extends Component {
  state = { animals: animals, birds: birds, search: "" };

  removeHandeler = (name) => {
    console.log(name);
    const UpdatedArray = this.state.animals.filter(
      (animal) => animal.name !== name
    );
    this.setState({ animals: UpdatedArray });
  };

  render() {
    return (
      <BrowserRouter>
        <Navbar />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route
            path="/animal"
            element={
              <Animal
                animals={this.state.animals}
                // 修改：传递接收name参数的函数，让子组件传入具体动物名
                removeCard={(name) => this.removeHandeler(name)}
              />
            }
          />
          <Route path="/bird" element={<Bird birds={this.state.birds} />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </BrowserRouter>
    );
  }
}

2. 修改 Animal 组件 #

遍历动物数组时，给每个 Card 组件传递绑定了当前动物 name 的回调函数，确保点击时能传递对应名称；同时修正组件名首字母小写的不规范写法：

import React from "react";
import Card from "./Card";
// 组件名首字母大写，符合React规范
const Animal = ({ animals, removeCard }) => {
  const animalList = animals.map((animal) => {
    return (
      <Card
        name={animal.name}
        likes={animal.likes}
        key={animal.name}
        // 修改：调用removeCard时传入当前动物的name
        removeCard={() => removeCard(animal.name)}
      />
    );
  });

  return (
    <div className="container">
      <div>
        <h1> Animal List</h1>
        <input />
      </div>
      <div className="animalList_container "> {animalList} </div>
    </div>
  );
};

export default Animal;

3. 修改 Card 组件 #

删除按钮直接调用上层传递过来的 removeCard 函数即可，此时该函数已经绑定了对应动物的名称：

import React from "react";

const Card = (props) => {
  return (
    <div className="card">
      <div className="image_wrapper">
        {/* 直接调用已绑定name的回调函数 */}
        <button className="removeButton" onClick={props.removeCard}>
          X
        </button>
        <img
          src={`https://source.unsplash.com/500x400/?${props.name} `}
          alt={`${props.name} `}
        />{" "}
      </div>
      <div className="animal_info">
        <h2>{props.name[0].toUpperCase() + props.name.slice(1)}</h2>
        <div className="social_wrapper">
          <button onClick={props.removeLikes}> Remove </button>
          <p>{props.likes} &#9829;</p>
          <button onClick={props.addLikes}> Add like </button>
        </div>
      </div>
    </div>
  );
};

export default Card;

流程说明 #

1. App 组件定义删除逻辑 removeHandeler，并传递一个接收 name 的回调给 Animal；
2. Animal 组件遍历数组时，为每个 Card 绑定当前动物的 name；
3. Card 点击删除按钮时，触发回调将 name 传递到 App，App 过滤数组并更新状态，完成卡片删除。

内容的提问来源于stack exchange，提问作者Hasan