Question

我试图在单击 Button 时打开 Material UI Box 组件，并在再次单击 Button 时关闭 Box。我试图从谷歌搜索解决方案，但真的找不到任何简单的东西。我需要非常基本的解决方案。我尝试过的方法没有任何解决方案，因为我只是想知道该怎么做。

我想我需要这些处理程序和其中的一些代码：

const [show, setShow] = useState(null);

const handleOpen = event => {
    setOpen(event.currentTarget);
};

const handleClose = () => {
    setOpen(null);
};

这是应该打开和关闭 Box 组件的 Button 组件。在那里我需要两个功能。当我点击按钮时，它设置 Box !null 如果它是 null 和 null 如果它是 !null:

<Button 
    className={classes.button}
    onClick={handleOpen}
>
    Click
</Button>
<Box className={classes.box}>
    // Some content
</Box>

Answer 1

您需要使用状态来显示/隐藏您的组件。你可以像这样简单地处理（使用 Hooks）

<AbsoluteLayout>
   <Frame BackgroundColor="Gray"
      Padding="0"
      CornerRadius="40"
      AbsoluteLayout.LayoutBounds="{Binding HomeCircle}"
      AbsoluteLayout.LayoutFlags="PositionProportional">
      <Label Text="TEST"
         HorizontalOptions="Center"
         VerticalOptions="Center"
         TextColor="Black"/>
         <Frame.GestureRecognizers>
            <TapGestureRecognizer Command="{Binding DoSomething}"/>
         </Frame.GestureRecognizers>
      </Frame>
   </AbsoluteLayout>

React 和 Material UI：显示和隐藏组件 onClick

1 个答案: