如何通过两个组件传递函数?

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

在传递到电影卡之前，它必须通过收藏夹组件：

<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传递给按钮onClickMovieCard，因此只有函数handleChange被调用。它所做的只是setStatetoggleWatched.

从您的情况来看，您的handleChange函数应如下所示

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

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

的

Answer 2

你的问题是你使用函数的方式。缺少 ((

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

并且必须使用电影卡中的按钮

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

或

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

更新： 按钮必须有内容，所以我建议你像这样改变电影卡

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

Answer 3

首先，如果您像这样调用函数，这将不是一个好方法

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

应该做的是，你应该在调用handleChange后调用切换。像这样：

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