我的目标是通过Recipe组件传递deleteRecipe函数(它接受一个参数),然后传递给Button组件。我坚持通过道具将配方的索引/ id传回原始功能的任务。当单击按钮时,如何将index / id参数带回deleteRecipe函数?
//Recipes Component
class Recipes extends Component {
constructor() {
super();
this.state = {
recipes: [],
input: ""
};
}
componentDidMount() {
axios
.get("/api/recipes")
.then(response => this.setState({ recipes: response.data }));
}
inputHandler = recipe => {
this.setState({ input: recipe });
};
searchRecipe = () => {
axios
.get(`/api/recipes/label?label=${this.state.input}`)
.then(response => this.setState({ recipes: response.data.hits }));
};
deleteRecipe = index => {
let newRecipes = this.state.recipes;
newRecipes.splice(index, 1);
this.setState({ recipes: newRecipes });
};
render() {
if (this.state.recipes) {
var recipesDisplay = this.state.recipes.map((val, i) => {
return (
<Recipe
key={val.recipe.id}
id={val.recipe.id}
name={val.recipe.label}
img={val.recipe.image}
url={val.recipe.url}
cal={val.recipe.calories}
ingredients={val.recipe.ingredientLines}
deleteRecipe={this.deleteRecipe}
/>
);
});
}
return (
<div>
<Input changed={this.inputHandler} />
<Button clicked={this.searchRecipe}>Search</Button>
{recipesDisplay}
</div>
);
}
}
//Recipe Component
const Recipe = props => {
let newIngredients = props.ingredients.map((val, i) => {
return <p key={i}>{val}</p>;
});
return (
<div key={props.id} className="recipe">
<div className="heading">
<h1>{props.name}</h1>
<Button>Edit</Button>
<Button clicked={props.deleteRecipe}>Delete</Button>
</div>
<div className="info">
<p>
<strong>Calories:</strong> {props.cal.toFixed(0)}
</p>
<br />
<p>
<strong>Ingredients:</strong>
</p>
{newIngredients}
</div>
<a href={props.url} target="_blank">
<img src={props.img} alt="food" />
</a>
</div>
);
};
//Button Component
const Button = props => {
return <button onClick={props.clicked}>{props.children}</button>;
};
答案 0 :(得分:0)
您可以将索引传递给配方组件,然后在单击按钮时,使用deleteRecipe函数将其传回
class Recipes extends Component {
constructor() {
super();
this.state = {
recipes: [],
input: ""
};
}
componentDidMount() {
axios
.get("/api/recipes")
.then(response => this.setState({ recipes: response.data }));
}
inputHandler = recipe => {
this.setState({ input: recipe });
};
searchRecipe = () => {
axios
.get(`/api/recipes/label?label=${this.state.input}`)
.then(response => this.setState({ recipes: response.data.hits }));
};
deleteRecipe = index => {
let newRecipes = this.state.recipes;
newRecipes.splice(index, 1);
this.setState({ recipes: newRecipes });
};
render() {
if (this.state.recipes) {
var recipesDisplay = this.state.recipes.map((val, i) => {
return (
<Recipe
key={val.recipe.id}
id={val.recipe.id}
index={i}
name={val.recipe.label}
img={val.recipe.image}
url={val.recipe.url}
cal={val.recipe.calories}
ingredients={val.recipe.ingredientLines}
deleteRecipe={this.deleteRecipe}
/>
);
});
}
return (
<div>
<Input changed={this.inputHandler} />
<Button clicked={this.searchRecipe}>Search</Button>
{recipesDisplay}
</div>
);
}
}
//Recipe Component
class Recipe extends React.Component {
deleteRecipe = () => {
this.props.deleteRecipe(this.props.index);
}
render() {
let newIngredients = this.props.ingredients.map((val, i) => {
return <p key={i}>{val}</p>;
});
return (
<div key={props.id} className="recipe">
<div className="heading">
<h1>{this.props.name}</h1>
<Button>Edit</Button>
<Button clicked={this.deleteRecipe}>Delete</Button>
</div>
<div className="info">
<p>
<strong>Calories:</strong> {this.props.cal.toFixed(0)}
</p>
<br />
<p>
<strong>Ingredients:</strong>
</p>
{newIngredients}
</div>
<a href={this.props.url} target="_blank">
<img src={this.props.img} alt="food" />
</a>
</div>
);
}
}
//Button Component
const Button = props => {
return <button onClick={props.clicked}>{props.children}</button>;
};