好的,所以我有一个按钮,可以在按下时打开和关闭“视图”。它的onPress处理程序工作正常,但我也想对其他按钮使用相同的处理程序。当我尝试这样做时,处理程序将无法正常工作。我可以打开视图,但不能关闭它。
这是我的Parent组件,它具有我作为道具传递的showFooter函数。我正在编辑不重要的信息。
class Bedrooms extends React.Component {
state = {
isFurnitureVisible: false,
isWashroomVisible: false,
isComfortVisible: false,
isCleanlinessVisible: false,
isRoommateVisible: false,
};
showFooter = (name) => {
this.setState((prevState) => ({
...prevState,
[name]: !prevState.name,
}));
};
render() {
const {isFurnitureVisible} = this.state;
return (
<ScrollView style={styles.container}>
<StatusBar backgroundColor="#fff" barStyle="dark-content" />
<Furniture
isFurnitureVisible={isFurnitureVisible}
showFooter={this.showFooter}
/>
</ScrollView>
这是我的子组件。同样,我正在编辑不重要的信息。
const Furniture = ({ isFurnitureVisible, showFooter }) => (
<>
<View style={styles.card}>
<TouchableOpacity
style={styles.btn}
onPress={() => showFooter('isFurnitureVisible')}>
<Text style={styles.btnTxt}>{isFurnitureVisible ? 'UP' : 'DOWN'}</Text>
</TouchableOpacity>
</View>
{isFurnitureVisible ? (
<View style={styles.cardFooter}>
<View style={styles.topContainer}>
<TouchableOpacity style={styles.footerBtn}>
<Image
当我按下按钮时,视图会展开,但是当我再次按下按钮将其关闭时,它将无法使用。我用控制台记录了状态,发现“ isFurnitureVisible”的值变为true,但是当按下按钮时,它不会变回“ false”。
请帮助。预先感谢。