javascript - 按下 TouchableOpacity Avatar 时将对象值绑定到组件中

Question

我的目标是在单击婴儿头像时显示绑定到该按钮的叠加层。让我知道如何解决它。

      const OverlayForm = ({ baby }) => {
        return <BabyProfile baby={baby} />;
      }

      return (
        <React.Fragment>
          <View style={styles.main}>
            {Babies.map((baby: Baby, index) => (
              <View>
                <TouchableOpacity
                  style={styles.button}
                  onPress={() => {
                    toggleOverlay;
                    myValue = baby;
                  }}
                  key={index}
                >
                  <AvatarData baby={baby} />
                </TouchableOpacity>
              </View>
            ))}
            <Overlay isVisible={visible} onBackdropPress={toggleOverlay}>
              {OverlayForm(myValue)}
            </Overlay>
          </View>
        </React.Fragment>
      );
    }

我通过 Quentin Grisel 的建议解决了这个问题。

标签： javascriptreactjsreact-native

Answer 1

您应该在您的 Baby avatar 组件中处理叠加层，并简单地更改其状态以显示/隐藏叠加层。

export default function App() {
  return <BabyAvatar overlay={false} />;
}

const BabyAvatar = () => {
  const [isOverlayed, setIsOverlayed] = React.useState(false);

  const displayOverlay = () => setIsOverlayed(!isOverlayed);

  return (
    <>
    <Text>Baby overlay: {isOverlayed ? 'true':'false'}</Text>
    <Button onPress={() => displayOverlay()} title="Change overlay" />
    </>
  )
}