Question

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

Favorites.js

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

        this.clearSaved = this.clearSaved.bind(this);
        this.handleDelete = this.handleDelete.bind(this);
    }

MovieList.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>
    )
};

Movie.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>

但是，我不知道该怎么办？编写this.props。 ...不起作用！

Answer 1

在Movie组件中：

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

然后添加调用您的回调道具的handleClick处理程序，

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组件中添加一个回调道具，并将其命名为onDeleteMovie。

export default (props) => {

然后像这样在您的Movie的{{1}}道具中传递它：

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组件中添加一个handleDelete方法，如下所示。

Favorites

并将其传递给您的handleDelete(index) { const movies = [...this.state.movies]; movies.splice(index, 1); this.setState({ movies }); }的{{1}}道具。

MovieList

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>
    )
};

在Moive.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)}

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

4 个答案: