如何在使用 React 加载页面时显示 grid.col 部分的 none

Question

从 GRID.COL 开始的表单应该在页面加载期间隐藏，一旦用户单击它应该显示在页面中的加号按钮。

我尽量不使用 css 显示 none 选项，而是尝试使用 react

请参考下面列出的代码

const [visible, setVisible] = useState(false)

我尝试了 onload，但因为它返回了一个不起作用的布尔值，有人可以帮我解决这个问题吗？

Answer 1

试试下面

{
  visible && (
    <Grid className="form1">
      <Grid.Col span={12} sm={4}>
        <TextInput label="Input" />
      </Grid.Col>
      <Grid.Col span={12} sm={4}>
        <Select label="Types" data={types} />
      </Grid.Col>
      <Grid.Col span={12} sm={4}>
        <Select label="Boolean" data={boolean} />
      </Grid.Col>
    </Grid>
  );
}
 <Col span={12}>
   <Group position="right">
     <Box>
       <Button
         color="green"
         leftIcon={
           <FontAwesomeIcon
             icon={["fas", "plus"]}
             color="white"
             onClick={test}
           />
         }
       />
     </Box>
   </Group>
 </Col>

如何在使用 React 加载页面时显示 grid.col 部分的 none

how to display none of the grid.col part when page is loading using react

jsx

typescript

reactjs