reactjs - 在 MaterialUI Grid 中使用表单

Question

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

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

---

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

问题: 添加 <form>移除 Grid 提供的间距。如何将输入和按钮包装在 <form> 中不影响原始布局(网格提供的样式/间距)？

更新:正如其中一个答案所暗示的，我不想提升 <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>
  );