我如何在MaterialUI中布局表单？

Posted 2023-01-26

我正在尝试使用MaterialUI Grid组件和字段来构造以下表单布局：

+-----------------------------------------+
|Form                                     |
|                                         |
| +--------------+ +----------------+     |
| |Field_1       | |Field_2         |     |
| +--------------+ +----------------+     |
| +--------------+ +---------+ +--------+ |
| |TextArea      | |Popup_A1 | |Popup_A2| |
| |              | +---------+ +--------+ |
| |              | +---------+ +--------+ |
| |              | |Popup_B1 | |Popup_B2| |
| |              | +---------+ +--------+ |
| |              | +---------+ +--------+ |
| |              | |Popup_C1 | |Popup_C2| |
| |              | +---------+ +--------+ |
| |              |                        |
| +--------------+                        |
+-----------------------------------------+

我的理解可能有些奇怪，并且弹出窗口显示为最小正方形。页面结构如下所示（简化）：

<Form>
  <Grid container direction="row" justify="flex-start" alignItems="flex-start" spacing=1>
    <Grid container xs="12" spacing="1">
      <Grid item xs=12 sm=6>
        <Field name="Field1" ... fullWidth />
      </Grid>
      <Grid item xs=12 sm=6>
        <Field name="Field2" ... fullWidth />
      </Grid>
    </Grid>
    <Grid container xs=12 >
      <Grid container xs=4 sm=4 >
        <Field  fullWidth multiline component=TextField />
      </Grid>

      <Grid container xs=8 sm=8>
        <Grid container >
          <Grid item>
            <Field name="Popup_A1" ... fullWidth select >....</Field>
          </Grid>
          <Grid item>
            <Field name="Popup_A2" ... fullWidth select >....</Field>
          </Grid>
        </Grid>
      </Grid>

      <Grid container xs=8 sm=8>
        <Grid container >
          <Grid item>
            <Field name="Popup_B1" ... fullWidth select >....</Field>
          </Grid>
          <Grid item>
            <Field name="Popup_B2" ... fullWidth select >....</Field>
          </Grid>
        </Grid>
      </Grid>

      ...

    </Grid>
 </Grid>
</Form>

有人可以让我摆脱痛苦，让我知道我做错了什么，或者可能将我指向构建这样的表格的资源吗？

答案

我为您创建了一个有效的codesandbox。

这里是代码。

function App() 
  return (
    <Form>
      <Grid
        container
        direction="row"
        justify="flex-start"
        alignItems="flex-start"
        spacing=1
      >
        Form
        <Grid container xs="12" spacing="1">
          <Grid item>
            <TextField name="Field1" value="Field1" />
          </Grid>
          <Grid item>
            <TextField name="Field2" value="Field2" />
          </Grid>
        </Grid>
        <Grid container xs=12>
          <Grid item xs=4 sm=4>
            <TextField
              fullWidth
              multiline
              value="Field1"
              label="Multiline"
              rows="6"
              defaultValue="Default Value"
            />
          </Grid>
          <Grid item xs=8 sm=8>
            <Grid container>
              <Grid item>
                <TextField name="Popup_A1" fullWidth select />
              </Grid>
              <Grid item>
                <TextField name="Popup_A2" fullWidth select />
              </Grid>
            </Grid>
            <Grid container>
              <Grid item>
                <TextField name="Popup_A1" fullWidth select />
              </Grid>
              <Grid item>
                <TextField name="Popup_A2" fullWidth select />
              </Grid>
            </Grid>
            <Grid container>
              <Grid item>
                <TextField name="Popup_A1" fullWidth select />
              </Grid>
              <Grid item>
                <TextField name="Popup_A2" fullWidth select />
              </Grid>
            </Grid>
          </Grid>
        </Grid>
      </Grid>
    </Form>
  );