Reactjs 在MaterialUI网格中使用表单

我在React应用程序中使用MaterialUI的网格将我的页面拆分为两个窗格。右侧有两个输入框和一个提交按钮。我使用

spating={3}

来提供输入和按钮之间的间距

首字母代码-

---

接下来，我在右边的网格元素周围添加了一个表单-

问题：添加

将删除网格提供的间距。如何在不影响原始布局（网格提供的样式/间距）的情况下，将输入和按钮包装在

中

更新：正如其中一个答案所建议的，我不希望在网格之前提升

我觉得把它应用于非形式元素是很不礼貌的

将来，我可能需要在网格中支持两种表单

---

将

表单

元素嵌套在网格容器和项目元素之间会打断间距，因为容器仅将间距样式应用于其属性

一种解决方案是将

表单

元素放置在所有网格元素之外。此外，您可以删除在表单中嵌套输入的要求：在

form

元素上指定

id

，并在每个输入元素中引用

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>
  );
}

从“React”导入React；
从“react hook form”导入{useForm}；
从“@material ui/core”导入{Grid}”；
提交函数（数据）{
控制台日志（数据）；
}
导出默认函数App（）{
常量{register，handleSubmit}=useForm（）；
返回(
{/*复杂网格布局省略*/}
提交
);
}

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

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>
  );
}

从“React”导入React；
从“react hook form”导入{useForm}；
从“@material ui/core”导入{Grid}”；
导入“/styles.css”；
提交函数（数据）{
控制台日志（数据）；
}
导出默认函数App（）{
常量{register，handleSubmit}=useForm({
模式：“onBlur”
});
返回(
左窗格
右窗格
{/*间距应在此网格项容器上*/}
输入1
输入2
提交
);
}

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

返回(
左窗格
右窗格
{/*间距应在此网格项容器上*/}
输入1
输入2
提交
{/*间距应在此网格项容器上*/}
输入1
输入2
提交
);

我不想将

表单移动到外部，而是希望它只包装输入、按钮组件。我喜欢您的第二种方法，但如果
输入
组件实际出现在
反应
组件中（比如
），则无法应用该方法。我直接使用
来简化示例（我无法控制要更改的组件以添加新的
道具
）
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>
  );