在一行中获取按钮和输入字段答案

【问题标题】：Getting the button and input fields in one line在一行中获取按钮和输入字段
【发布时间】：2020-02-12 23:32:24
【问题描述】：

我正在创建一个表单，从我的公司数据库中提取一些数据，但这些字段没有在一行中对齐。原始代码使用自定义图像来删除字段，但它从未内联。我试图创建一个新版本，其中 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 上处理代码。

【问题讨论】：

沙盒似乎不存在
Codesandbox 链接给出 404
我担心它会那样做。在沙箱中复制粘贴代码将使其运行。必须手动添加依赖项。对不起！我会尝试同时启动并运行它，一旦我弄清楚就会在这里发布。编辑：好的，它有效！
@foreverAnIntern 刚刚给你写了一个解决方案，如果有帮助请告诉我；)
确实做到了！虽然我仍然面临对齐问题，但我至少能够将所有内容集中在一条线上。我想我必须弄乱CSS才能让它正确。非常感谢您的帮助！

标签： reactjs material-ui

【解决方案1】：

在内部的 Grid 标记中，你可以给它一个带有一些 flex 样式的类。这将强制所有子元素位于同一行。

组件

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

查看沙盒：https://codesandbox.io/s/frosty-pine-4kzs7

【讨论】：