在 MaterialUI Grid 中使用表单

Question

我在我的 React 应用程序中使用 MaterialUI 的 Grid 将我的页面分成两个窗格。右侧有两个输入框和一个提交按钮。我使用spacing={3} 来提供输入和按钮之间的间距。

初始代码 - https://codesandbox.io/s/cool-morning-mh302

---

接下来，我使用react hook form 在右侧的 Grid 元素周围添加了一个表单 - https://codesandbox.io/s/fervent-chaum-0qgb6

问题：添加<form> 会删除网格提供的间距。如何在不影响原始布局（网格提供的样式/间距）的情况下将输入和按钮包装在 <form> 中？

更新：正如其中一个答案所暗示的，我不希望在 Grid 之前提升 <form>。

1. 我觉得将它应用到非表单元素是很不自然的。
2. 将来，我可能必须在网格内支持两种形式。

Answer 1

表单内应该有另一个网格容器：-

import React from "react";
import { useForm } from "react-hook-form";

import { Grid } from "@material-ui/core";

import "./styles.css";

function onSubmit(data) {
  console.log(data);
}
export default function App() {
  const { register, handleSubmit } = useForm({
    mode: "onBlur"
  });

  return (
    <div className="App">
      <Grid container spacing={2} justify="space-around">
        <Grid item xs={4} container>
          Left pane
        </Grid>

        <Grid item xs={7} container spacing={3}>
          <Grid xs={12} item className="rightPaneHeading">
            Right pane
          </Grid>
          <form onSubmit={handleSubmit(onSubmit)}>
            {/* spacing should be on this grid item container */}
            <Grid item xs={12} container spacing={3}>
              <Grid item xs={12}>
                Input 1<input name="my-input-1" type="text" ref={register} />
              </Grid>
              <Grid item xs={12}>
                Input 2 <input name="my-input-2" type="text" ref={register} />
              </Grid>
              <Grid item xs={12}>
                <button type="submit"> Submit </button>
              </Grid>
            </Grid>
          </form>
        </Grid>
      </Grid>
    </div>
  );
}

另外，您可以在一个网格中（左或右）有两种形式：-

return (
  <div className="App">
    <Grid container spacing={2} justify="space-around">
      <Grid item xs={4} container>
        Left pane
      </Grid>

      <Grid item xs={7} container>
        <Grid xs={12} item className="rightPaneHeading">
          Right pane
        </Grid>
        <form onSubmit={handleSubmit(onSubmit)}>
          {/* spacing should be on this grid item container */}
          <Grid item xs={12} container spacing={3}>
            <Grid item xs={12}>
              Input 1<input name="my-input-1" type="text" ref={register} />
            </Grid>
            <Grid item xs={12}>
              Input 2 <input name="my-input-2" type="text" ref={register} />
            </Grid>
            <Grid item xs={12}>
              <button type="submit"> Submit </button>
            </Grid>
          </Grid>
        </form>
        <form onSubmit={handleSubmit(onSubmit)}>
          {/* spacing should be on this grid item container */}
          <Grid item xs={12} container spacing={3}>
            <Grid item xs={12}>
              Input 1<input name="my-input-1" type="text" ref={register} />
            </Grid>
            <Grid item xs={12}>
              Input 2 <input name="my-input-2" type="text" ref={register} />
            </Grid>
            <Grid item xs={12}>
              <button type="submit"> Submit </button>
            </Grid>
          </Grid>
        </form>
      </Grid>
    </Grid>
  </div>
  );

Answer 2

在 Grid 容器和项元素之间嵌套 form 元素会破坏间距，因为容器仅将间距样式应用于其 direct children。

一种解决方案是将form 元素放在所有网格元素之外。此外，您可以删除将输入嵌套在表单中的要求：在 form 元素上指定 id，并在每个输入的 form attribute 中引用 id。

简化示例：

import React from "react";
import { useForm } from "react-hook-form";

import { Grid } from "@material-ui/core";

function onSubmit(data) {
  console.log(data);
}

export default function App() {
  const { register, handleSubmit } = useForm();

  return (
    <div>
      <form onSubmit={handleSubmit(onSubmit)} id="my-form"></form>

      {/* Complex Grid layout omitted */}

      <input name="my-input" type="text" form="my-form" ref={register} />
      <button type="submit" form="my-form">Submit</button>
    </div>
  );
}