Question

在我的应用程序中，我想有条件地禁用图标。这是我的代码。

<View style={styles.controlsContainer}>
                    <WorkoutProgressControls 
                        videoPaused={this.state.videoPaused}
                        onPrevious={() => alert("PREVIOUS MOVEMENT")}
                        onPause={() => this._onPauseVideo()}
                        onNext={() => this.getNextMovement()}
                        disableNext={() => 1 === 1 ? false : true}
                    />
                </View>

当我将disableNext设置为true或false时，它可以正常工作。但是，当我尝试有条件地更改它或使用某个函数时，它总是被禁用。

这是我设置disableNext属性的组件。

 <DisableableIcon
                iconStyles={styles.icon}
                resizeMode="contain"
                source={Next}
                height={35}
                width={35}
                disabled={props.disableNext}
                onIconPressed={props.onNext}
            />

这是什么问题？为什么在将disableNext设置为true和false却在尝试有条件地设置为true时始终返回true为何可以正常工作？

Answer 1

您正试图将函数作为道具传递，因此要使其工作，请不要使用函数或在组件中将其作为函数调用。

...
disableNext={() => 1 === 1 ? false : true}
...

...
disabled={props.disableNext()}
...

OR

...
disableNext={1 === 1 ? false : true}
...

...
disabled={props.disableNext}
...

反应本机函数始终返回true

1 个答案: