javascript - 需要 Reactjs 帮助来了解如何正确地将这个函数从父按钮组件传递到子按钮组件

Question

对于reactjs来说是全新的，所以请耐心等待。
- 我有一个返回表格的 MovieContainer 组件。
- 我有一个子 MovieCell 组件，它将放置在 MovieContainer 内并迭代对象数组。单元格内部有一个删除按钮，它将过滤列表数组以删除单击的项目
- 我在 MovieContainer 组件中准备了删除函数，但我不确定将其传递给子组件的正确方法。

github link
MovieContainer 组件:

class MoviesContainer extends Component {
  constructor(props) {
    super(props);

    this.state = {
      movies: getMovies()
    };

    this.deleteMovie = this.deleteMovie.bind(this);
  }

  deleteMovie(movie) {
    const movies = this.state.movies.filter(m => m._id !== movie._id);
    this.setState({
      movies: movies
    });
    console.log(this);
  }

  render() {
    return (
      <table className="table">
        <thead>
          <tr>
            <th>Title</th>
            <th>Genre</th>
            <th>Stock</th>
            <th>Rate</th>
          </tr>
        </thead>
        <tbody>
          {this.state.movies.map(movie => (
            <MovieCell
              key={movie._id}
              title={movie.title}
              genre={movie.genre.name}
              numberInStock={movie.numberInStock}
              dailyRentalRate={movie.dailyRentalRate}
              deleteMovie={this.deleteMovie}
            />
          ))}
        </tbody>
      </table>
    );
  }
}

MovieCell 组件:

class MovieCell extends Component {
  constructor(props) {
    super(props);

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

  handleDelete(movie) {
    this.props.deleteMovie(movie);
  }

  render() {
    const title = this.props.title;
    const genre = this.props.genre;
    const numberInStock = this.props.numberInStock;
    const dailyRentalRate = this.props.dailyRentalRate;

    return (
      <tr>
        <td>{title}</td>
        <td>{genre}</td>
        <td>{numberInStock}</td>
        <td>{dailyRentalRate}</td>
        <td>
          <button onClick={movie => this.handleDelete(movie)}>Delete</button>
        </td>
      </tr>
    );
  }
}

Answer 1

您当前将事件命名为movie并将其用作电影对象，但这将无法按预期工作。

您可以将电影 ID 作为 Prop 传递，并在调用 handleDelete 时使用它来代替 event。

class MoviesContainer extends Component {
  // ...

  deleteMovie(movieId) {
    const movies = this.state.movies.filter(m => m._id !== movieId);
    this.setState({
      movies: movies
    });
  }

  render() {
    return (
      <table className="table">
        <thead>
          <tr>
            <th>Title</th>
            <th>Genre</th>
            <th>Stock</th>
            <th>Rate</th>
          </tr>
        </thead>
        <tbody>
          {this.state.movies.map(movie => (
            <MovieCell
              key={movie._id}
              id={movie._id}
              title={movie.title}
              genre={movie.genre.name}
              numberInStock={movie.numberInStock}
              dailyRentalRate={movie.dailyRentalRate}
              deleteMovie={this.deleteMovie}
            />
          ))}
        </tbody>
      </table>
    );
  }
}

class MovieCell extends Component {
  // ...

  handleDelete() {
    this.props.deleteMovie(this.props.id);
  }

  render() {
    const title = this.props.title;
    const genre = this.props.genre;
    const numberInStock = this.props.numberInStock;
    const dailyRentalRate = this.props.dailyRentalRate;

    return (
      <tr>
        <td>{title}</td>
        <td>{genre}</td>
        <td>{numberInStock}</td>
        <td>{dailyRentalRate}</td>
        <td>
          <button onClick={this.handleDelete}>Delete</button>
        </td>
      </tr>
    );
  }
}