按钮onPress处理程序无法正常运行

时间:2019-12-01 22:33:43

标签: react-native

好的,所以我有一个按钮,可以在按下时打开和关闭“视图”。它的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”。

请帮助。预先感谢。

0 个答案:

没有答案