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

然后在收藏夹.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传递给onClick处的按钮MovieCard，因此只有函数handleChange被调用。而它所做的只是setState的{{1}}。

根据您的情况，您的toggleWatched函数应如下所示

handleChange

我们将handleChange= () => { this.setState({toggleWatched:!this.state.toggleWatched}, () => this.Toggling()) }作为this.Toggling()的第二个参数传递，因为setState是异步的

Answer 2

您的问题是使用功能的方式。缺少（）

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

MovieCard中的按钮必须使用

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

或

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

更新：该按钮必须包含内容，所以我建议您这样更改MovieCard

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

Answer 3

首先，如果您像这样调用函数，

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

应该做的是，应该在调用handleChange之后调用Toggling。像这样：

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

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

}


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

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

如何通过两个组件传递功能？

3 个答案: