[英]Getting data to state component in React.js
我在應用程序組件和動物組件中渲染動物命名組件,我正在映射來自 state 的動物數組並將數據發送到卡片組件。卡片組件正在為每個動物制作卡片。基本上就像這個 App->home>card . 現在我在卡片組合中有一個刪除按鈕,我需要在單擊按鈕后將卡片動物名稱帶入應用程序組合。 我怎么能這樣做??
我如何將 animal.name 放入 this.removeHandeler 中,以便我可以使用卡組件中的刪除按鈕刪除卡。
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} ♥</p>
<button onClick={props.addLikes}> Add like </button>
</div>
</div>
</div>
);
};
export default Card;
您的Card
組件具有動物的名稱,因此您可以從那里調用removeHandeler
function。 只需像這樣在Animal
道具中傳遞它:
<Animal
animals={this.state.animals}
removeCard={this.removeHandeler.bind(this)}
/>
在Card
組件中,在onClick
中調用它:
<button className="removeButton" onClick={() => {props.removeCard(props.name)}}>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.