我在我的 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>
在网格之前。
- 我觉得把它应用到非表单元素上是很老套的。
- 将来,我可能必须在网格中支持两种形式。
最佳答案
你应该在表单中有另一个网格容器:-
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>
);
关于reactjs - 在 MaterialUI Grid 中使用表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64753885/