我在APP组件中渲染动物命名组件,在动物组件中我映射来自州的动物数组并将数据发送到卡片组件.卡片组件正在为每一种动物制作卡片.基本上就像这张App&>;Home&>卡片.现在我在卡片组合中有一个移除图标,我需要在点击按钮后将卡片动物的名字带到应用程序组合中.我怎么才能做到这一点呢?

我如何在this.emoveHandeler中引入Animal.name,这样我就可以使用Card组件中的Remove按钮来删除该卡.

App component

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}
                removeCard={() => this.removeHandeler(animal.name)}
              />
            }
          />
          <Route path="/bird" element={<Bird birds={this.state.birds} />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </BrowserRouter>
    );
  }
}

动物成分

import React from "react";
import Card from "./Card";
const animal = ({ animals, removeCard }) => {
  const animalList = animals.map((animal) => {
    return (
      <Card
        name={animal.name}
        likes={animal.likes}
        key={animal.name}
        removeCard={removeCard}
      />
    );
  });

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

export default animal;

卡片组件

import React from "react";

const Card = (props) => {
  return (
    <div className="card">
      <div className="image_wrapper">
        <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;

推荐答案

您的Card组件具有动物的名称,因此您可以从那里调用您的removeHandeler函数.只需像这样在Animal个props 中传递它:

<Animal
    animals={this.state.animals}
    removeCard={this.removeHandeler.bind(this)}
/>

Card分量中,将其称为onClick分量:

<button className="removeButton" onClick={() => {props.removeCard(props.name)}}>

Javascript相关问答推荐

如何迭代叔父元素的子HTML元素

WP Bootstrap NavWaker:下拉菜单一次打开所有下拉菜单

映射类型定义,其中值对应于键

Use Location位置成员在HashRouter内为空

查询参数中的JAVASCRIPT/REACT中的括号

Next.js中的服务器端组件列表筛选

每隔3个项目交替显示,然后每1个项目交替显示

如何在每隔2分钟刷新OKTA令牌后停止页面刷新

如何设置时间选取器的起始值,仅当它获得焦点时?

扩散运算符未按预期工作,引发语法错误

Firefox的绝对定位没有达到预期效果

当S点击按钮时,我如何才能改变它的样式?

REACT-本机错误:错误类型错误:无法读取未定义的容器的属性

使用Firebase实时数据库`update`在同一 node 上执行多个更新

我不能将每个产品单独添加或删除到Collection 列表中

重新定位类元素

Nextjs Google自动补全给出了不正确的值

如何获取获取器列表

有没有办法让动画在中止时结束?

基于单击按钮更改椭圆的填充/取消填充状态,同时跟踪用户是否 Select 另一种 colored颜色