Передача списка детей родителю

Question

    <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>    
       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>
        } }
    
    

И Родитель

class Movies extends Component {
        constructor(props) {
            super(props);
            this.state = { movies: getMovies(), }

        }

        handleDelete = (movie) => {
            console.log(movie);

        }


        render() {


            return (
                <MoviesList movies={this.state.movies} onClick={() => this.handleDelete(movie)} />
            );
        }
    }

Я правильно вижу список фильмов на столе. Но я хочу назначить кнопку для удаления по нажатию кнопки. Я понимаю, что мне нужно передать фильм как реквизиты из дочернего компонента movieList, но я не могу понять, как передать фильм, чтобы я мог его удалить. С помощью функции handleDelete, вызванной для свойства onClick, я получаю неопределенное значение на консоли. Принимая во внимание, что я ожидаю получить ценность фильма, когда я нажимаю. Как я могу сделать это в React.

Answer 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 компонента мы также будем использовать доступный индексный параметр и передадим этот индекс в обработчик событий 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>
  )
}

Answer 2

Вам нужно передать элемент фильма через ваш обратный вызов.Измените ваши дочерние компоненты 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 });
}