reactjs - 在一行中获取按钮和输入字段
问题描述
我正在创建一个表单,从我的公司数据库中提取一些数据,但这些字段没有在一行中对齐。原始代码使用自定义图像来删除字段,但它从未内联。我试图创建一个新版本,其中 4 个字段将与删除按钮内联。这就是我到目前为止所拥有的。
import React from "react";
import ReactDOM from "react-dom";
import Grid from "@material-ui/core/Grid";
import TextField from "@material-ui/core/TextField";
import DeleteIcon from "@material-ui/icons/Delete";
import IconButton from "@material-ui/core/IconButton";
import { makeStyles } from "@material-ui/core/styles";
import "./styles.css";
const useStyles = makeStyles(theme => ({
button: {
margin: theme.spacing(1)
}
}));
function App() {
const classes = useStyles();
return (
<>
<div>This Grid is always auto-layout.</div>
<Grid container spacing={10}>
{/* {[1, 2, 3, 4, 5, 6, 7].map(() => ( */}
<Grid item form="maincomponent" xs>
<TextField required label="true" type="number" />
<TextField required label="true" type="number" />
<TextField required label="true" type="number" />
<TextField required label="true" type="number" />
<IconButton
color="secondary"
className={classes.button}
aria-label="delete"
>
<DeleteIcon />
</IconButton>
</Grid>
{/* ))} */}
</Grid>
{/* <br />
<br />
<Grid container spacing={24}>
{[1, 2, 3, 4, 5, 6, 7].map(() => (
<Grid item xs={4} sm={3} md>
<TextField required label="4/3/true" type="number" />
</Grid>
))}
</Grid> */}
</>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
我从教程中选择了这个,并根据我的需要对其进行了修改。到目前为止,我已经尝试使用以下网格道具来操纵原始代码(由于其公司代码无法在此处发布):alignContent、alignItems、justify 和 justifyContent。当我无法达到我想要的效果时,我尝试在 material-ui 的 Field Tag 中操作 sm 和 xs。我不太了解这些(第一份工作),并希望有任何方向。我已经阅读了 API,不幸的是它对双字母属性[lg,md,sm,xl,xs]给出了相同的描述。
感谢任何帮助!
我尝试在CodeSandbox上处理代码。
解决方案
在内部的 Grid 标签中,你可以给它一个带有一些弹性样式的类。这将强制所有子元素位于同一行。
零件
<Grid container spacing={10}>
{/* {[1, 2, 3, 4, 5, 6, 7].map(() => ( */}
<Grid className="d-flex" item form="maincomponent" xs>
<TextField required label="true" type="number" />
<TextField required label="true" type="number" />
<TextField required label="true" type="number" />
<TextField required label="true" type="number" />
<IconButton
color="secondary"
className={classes.button}
aria-label="delete"
>
<DeleteIcon />
</IconButton>
</Grid>
{/* ))} */}
</Grid>
CSS
.d-flex{
display: flex
}
推荐阅读
- python - 我如何理解在 Docker 中使用 Flask 进行 ENTRYPOINT 日志记录
- javascript - React Native 与 Expo“ReferenceError:找不到变量:警报”
- reactjs - 在高阶组件中使用 react-table,无效的钩子调用
- android - 使用 getUID 或 getEmail 以保留 Firebase 中的用户
- java - 如何修复错误 java.util.InputMismatchException?
- scala - Scala 测试:guiceApplicationBuilder 没有用测试配置替换应用程序配置
- php - Docker 中的 PECL 包安装失败
- javascript - 如何在网页上添加 Youtube 视频
- python - 通过另一个排序的枚举列表重新排列元组列表
- docker - Docker 没有使用 pip install -r requirements.txt 正确安装 python 包