I am new to React and trying to understand the basics. I have a child component called movieList that return a list of movies in a table form.
const movieList = () =>{
const {movies} = props;
return (){
<tbody>
<Fragment>
{movies.map((movie, i) => (
<tr key={i}>
<td>{movie.title}</td>
<td>{movie.genre.name}</td>
<td>{movie.numberInStock}</td>
<td>{movie.dailyRentalRate}</td>
<td><button className="btn btn-danger btn-sm" onClick={props.onClick} movie={props.movie}>Delete</button></td>
</tr>
))}
</Fragment>
</tbody>
} }
And the Parent
I am new to React and trying to understand the basics. I have a child component called movieList that return a list of movies in a table form.
const movieList = () =>{
const {movies} = props;
return (){
<tbody>
<Fragment>
{movies.map((movie, i) => (
<tr key={i}>
<td>{movie.title}</td>
<td>{movie.genre.name}</td>
<td>{movie.numberInStock}</td>
<td>{movie.dailyRentalRate}</td>
<td><button className="btn btn-danger btn-sm" onClick={props.onClick} movie={props.movie}>Delete</button></td>
</tr>
))}
</Fragment>
</tbody>
} }
我在桌子上正确地获得了电影列表。但是我想将按钮定位为单击按钮时删除。我知道我需要通过子组件movieList中的道具传递电影,但是我似乎无法弄清楚如何通过电影才能删除它。通过onClick属性上调用的handleDelete函数,我在控制台上得到了一个未定义的值。而我希望在单击时能获得电影的价值。我该如何在React中做到这一点。
答案 0 :(得分:1)
很酷,所以您有电影列表,只需要删除正确的电影即可。我们将尝试通过数组中的索引删除该电影。我们将使用array.filter()
方法。请参阅沙箱以供参考:https://codesandbox.io/s/intelligent-dan-uskcy
class Movies extends React.Component {
constructor(props) {
super(props);
this.state = {
movies: [
{ genre: { name: "Avengers: End Game" }, numberInStock: 100000, dailyRentalRate: 1 },
{ genre: { name: "Harry Potter" }, numberInStock: 20000, dailyRentalRate: 2 },
{ genre: { name: "DBZ" }, numberInStock: 200000, dailyRentalRate: 1}
]
}; // assuming movies is an array
}
handleDelete = movieIndex => {
const { movies } = this.state;
const updatedMovies = movies.filter((movie, index) => {
return index !== movieIndex;
});
this.setState({
movies: updatedMovies
});
};
render() {
return (
<MovieList movies={this.state.movies} handleDelete={this.handleDelete} />
);
}
}
因此handleDelete()
以索引作为参数,我们用它来创建新的电影数组,其中不包含带有传入索引的电影。
然后在.map()
组件的MovieList
中,我们还将使用可用的index参数,并将该索引传递到事件处理程序props.handleDelete(i)
中。这将调用父组件中定义的handleDelete()
函数,并将更新状态。
const MovieList = (props) =>{
const {movies} = props;
return (
<tbody>
<Fragment>
{movies.map((movie, i) => (
<tr key={i}>
<td>{movie}</td>
<td>{movie.genre.name}</td>
<td>{movie.numberInStock}</td>
<td>{movie.dailyRentalRate}</td>
<td><button className="btn btn-danger btn-sm" onClick={() => props.handleDelete(i)} movie={props.movie}>Delete</button></td>
</tr>
))}
</Fragment>
</tbody>
)
}
答案 1 :(得分:0)
您需要通过回调传递movie元素。将您的子组件onlick更改为:
onClick={() => props.onClick(movie)}
然后,您需要将数据从回调传递到父级函数中
onClick={movie => this.handleDelete(movie)}
或者只是
onClick={this.handleDelete}
然后您要做的就是从您所在州的列表中删除该电影。然后,React将从DOM中删除该元素:
handleDelete = (movie) => {
const { movies } = this.state;
const newMoviews = movies.slice();
newMovies.splice(newMovies.findIndex(m => m.title === movie.title), 1)
this.setState({ movies: newMovies });
}