javascript - 如何通过两个组件传递我的功能？

Question

所以我有一个状态:

toggleWatched:false

以下是 App.js 文件中将传递给 MovieCard 组件的四个函数:

    watchedMovie= () => {
    console.log("WATCHED MOOPIE");
}

notWatchedMovie = () => {
    console.log("HAVENT WATCHED MOOPIE");

}


handleChange= () => {
    this.setState({toggleWatched:!this.state.toggleWatched})
}

Toggling = () => {
    this.state.toggleWatched ? this.watchedMovie : this.notWatchedMovie;
}

在传递给 MovieCard 之前，它必须通过收藏夹组件传递:

                              <Favorites
                                {...props}
                                handleChange={this.handleChange}
                                Toggling={this.Toggling}
                                toggleWatched={this.state.toggleWatched}
                            />

然后在 favorites.js 的渲染中:

 const {
        Toggling,
        handleChange,
        toggleWatched,
    } = this.props;

然后传递给常量组件的电影卡片:

                            <MovieCard
                                handleChange={handleChange}
                                Toggling={Toggling}
                                toggleWatched={toggleWatched}

                            />

在电影卡中，它的用法如下:

const MovieCard = ({ handleChange,Toggling,}) 

我在 MovieCard 中制作了一个按钮来处理它:

               <button style={{fontSize:"14px"}} onClick={handleChange}>
           {
               Toggling
           }
            </button>

当我按下按钮时，没有错误，但也没有任何安慰。我不知道错误是什么。有人可以帮我解决这个问题吗？

Answer 1

我想我知道问题所在。您的函数 Toggling 未被调用。函数本身不会被调用，您只是将 handleChange 传递给 MovieCard 处的按钮 onClick，因此只有函数 handleChange 被调用。而它所做的只是setState 用于toggleWatched。

根据你的情况，你的handleChange 函数应该如下所示

handleChange= () => {
  this.setState({toggleWatched:!this.state.toggleWatched}, () => this.Toggling())
}

我们将 this.Toggling() 作为 setState 的第二个参数传递，因为 this.setState 是异步的