将清单孩子传递给父母

Question

    
  
 
  
  
  
 
   
 
    
    
       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 

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

I get the list of movies correctly on the table. But I want to target the button for delete on button click. I understand that I need to pass the movie as props from the child component movieList but I cant seem to figure out how to pass the movie for me to be able to delete. With the handleDelete function called on the onClick property, I get an undefined value on the console. Whereas I expect to get the value of a movie when I click. How can I do this in React.

Answer 1

Cool so you have a list of movies and you just need to remove the right movie. We're going to try removing the movie it by its index in our array. We'll use the array.filter() method. See sandbox for reference: https://codesandbox.io/s/intelligent-dan-uskcy

Parent

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

So handleDelete() takes an index as an argument, and we use that to create a new array of movies, that do not include the movie with the index you passed in.

Then in the .map() of your MovieList component, we'll use the available index parameter as well, and pass that index inside the event-handler, props.handleDelete(i) . That will call the handleDelete() function defined in the parent component and it will update state.

Child

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

You need to pass the movie element through your callback. Change your child-components onlick to:

onClick={() => props.onClick(movie)}

Afterwards you need to pass the data from the callback to your function in your parent

onClick={movie => this.handleDelete(movie)}

or just

onClick={this.handleDelete}

Then all you need to do is remove the movie from the list in your state. React will then remove the element from the 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 });
}