Javascript 需要关于如何正确地将此函数从父按钮组件传递到子按钮组件的帮助吗

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

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

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

class MoviesContainer扩展组件{
建造师（道具）{
超级（道具）；
此.state={
电影：getMovies（）
};
this.deleteMovie=this.deleteMovie.bind（this）；
}
删除电影（电影）{
const movies=this.state.movies.filter（m=>m.\u id！==movie.\u id）；
这是我的国家({
电影：电影
});
console.log（this）；
}
render（）{
返回(
标题
体裁
股票
比率
{this.state.movies.map（movie=>(
))}
);
}
}

电影单元组件：

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

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

类MovieCell扩展组件{
建造师（道具）{
超级（道具）；
this.handleDelete=this.handleDelete.bind（this）；
}
Handledelet（电影）{
this.props.deleteMovie（电影）；
}
render（）{
const title=this.props.title；
const genre=this.props.genre；
const numberInStock=this.props.numberInStock；
const dailyRentalRate=this.props.dailyRentalRate；
返回(
{title}
{流派}
{numberInStock}
{dailyRentalRate}
this.handledelite（movie）}>Delete
);
}
}

您当前正在将

事件

命名为

电影

，并将其用作无法按预期工作的电影对象

您可以将电影id作为道具传递，并在调用

handleDelete

时使用它而不是

事件

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

class MoviesContainer扩展组件{
// ...
删除电影（电影ID）{
const movies=this.state.movies.filter（m=>m.\u id！==movieId）；
这是我的国家({
电影：电影
});
}
render（）{
返回(
标题
体裁
股票
比率
{this.state.movies.map（movie=>(
))}
);
}
}
类MovieCell扩展组件{
// ...
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；
返回(
{title}
{流派}
{numberInStock}
{dailyRentalRate}
删除
);
}
}
您似乎正确地传递了它。你有什么问题？啊，你可以把
电影
传给孩子，然后在你的
手柄上
你可以再次使用它。或者您可以使用
id
代替电影。谢谢！是的，通过身份证是去Go的路，不客气。而且，只要看看@Tholle提供的代码就可以了。您不需要调用
handleDelete
函数，只需使用它的引用即可。这样，它不会在每次渲染中重新创建。