如何添加事件处理程序以从列表中删除单个项目?

Question

我有以下代码，我想添加一个偶数处理程序来检测何时单击删除按钮，然后从列表中删除特定项目。

收藏夹.js

constructor(props) {
super(props);
this.state = {
movies: []
};
this.clearSaved = this.clearSaved.bind(this);
this.handleDelete = this.handleDelete.bind(this);
}

电影列表.js

export default ({ movies }) => {
return(
<div id="saved-movies-list">
<ul className="saved-movies-list">
{ movies.map(movie => <li key={ movie.imdbID }><Movie movie={ movie } /></li>) }
</ul>
</div>
)
};

电影.js

const Movie = ({movie}) => {
return (<div className="movie-card" id={movie.imdbID}>     
{
// eslint-disable-next-line
movie.poster == 'N/A' ? 
<div className="movie-card-poster missing">
<img className="d-block h-100" src={movie_poster} alt="" /> 
</div>
:
<div className="movie-card-poster">
<img className="d-block h-100" src={movie.poster} alt="" />
</div>
}
<div className="body">
<div style={{ maxWidth: '80%' }}>
<h5 class="card-title">{movie.title}</h5>
</div>
<p className="text-secondary">{ movie.year }</p>
{!movie.runtime ? "" : <p className="text-secondary">{ movie.runtime }</p>}
<p className="plot">{movie.description}</p>
<a href="#" className="delete-movie" title="Remove this movie"><FontAwesomeIcon icon="minus-circle" size="1x" /></a>
</div>
</div>)
}

我需要将事件附加到此行：

<a href="#" className="delete-movie" title="Remove this movie"><FontAwesomeIcon icon="minus-circle" size="1x" /></a>

但是，我不知道该怎么做？写这个道具。...不行！

Answer 1

在Movie组件中：

在Movie组件中添加一个回调道具，调用任何你喜欢的，例如：onDelete。

然后添加调用你的回调 prophandleClick处理程序，

const handleClick = (event) => {
event.preventDefault();
props.onDelete(); // This callback is coming from your `Movie` props.
}

并将其传递给锚元素的onClick属性。

<a
href="#"
className="delete-movie"
title="Remove this movie"
onClick={handleClick}
>
<FontAwesomeIcon icon="minus-circle" size="1x" />
</a>

在MovieList组件中：

在MovieList组件中添加一个回调 prop 并将其调用onDeleteMovie。

export default (props) => {

然后像这样将它传递到Movie的onDelete道具中：

{props.movies.map((movie, index) => 
<li key={index}> // since imdbID is not unique after all use the index
<Movie
movie={movie}
onDelete={() => props.onDeleteMovie(index)}
/>
</li>
)}

在Favorites组件中：

在组件中添加如下所示FavoriteshandleDelete方法。

handleDelete(index) {
const movies = [...this.state.movies];
movies.splice(index, 1);
this.setState({ movies });
}

并将其传递给您的MovieListonDeleteMovie道具。

<MovieList
movies={this.state.movies}
onDeleteMovie={this.handleDelete}
/>

Answer 2

export default ({ movies }) => {
const handleDelete = (id) => {
// write your deleting logic here with item id
}
return(
<div id="saved-movies-list">
<ul className="saved-movies-list">
{
movies.map(movie => 
<li key={ movie.imdbID }>
<Movie
movie={ movie }
onDelete={() => handleDelete(movie.imbID)}
/>
</li>
)
}
</ul>
</div>
)
};

在莫伊夫.js

const Movie = ({movie, onDelete}) => {
return (
...
<a href="#" className="delete-movie" title="Remove this movie" 
onClick= {onDelete}
> 
<FontAwesomeIcon icon="minus-circle" size="1x" />
</a>
...
)
}

我将带有参数项 id 的handleDelete作为 onDelete 函数传递给每个子组件。

Answer 3

对于事件处理程序，可以使用简单的onClick事件，如下所示：

{ movies.map(movie => <li onClick={()=>handleClick(movie.imdbID)} key={ movie.imdbID }><Movie movie={ movie } /></li>) }

然后你应该写你的handleClick函数，你想要删除电影。 现在，有很多方法可以删除。但是让我们看看你只是不希望它渲染。然后，您应该管理一个数组/集合，其中包含您不想渲染的imdbID's，并在渲染事件中使用它。

使用 React 钩子：

export default ({ movies }) => {
const [removeList, setRemoveList] = useState([]);
const handleClick = (id) => setRemoveList([...removeList, id]);   
return(
<div id="saved-movies-list">
<ul className="saved-movies-list">
{ movies.map(movie => (!removeList.includes(movie.imdbID)) && <li onClick={()=>handleClick(movie.imdbID)} key={ movie.imdbID }><Movie movie={ movie } /></li>) }
</ul>
</div>
)
};

Answer 4

在声明movies的文件中，也声明此函数

---

const deleteMovie = key => this.setState({ movies: this.state.movies.filter(movie => movie.imdbID != key })

---

把它作为道具传递给Movie，并像

---

onClick ={()=> deleteMovie(movie.imbdID)}