如何使用React Material-UI创建2列表单? [英] How Do I Create A 2 Column Form WIth React Material-UI?

问题描述

我正在使用material-ui创建一个反应形式.

I am creating a react form with material-ui.

我希望表单是固定的2列视图，而不是根据浏览器的大小进行流动，因此始终是这样的:

I would like the form to be a fixed 2 column view and not flow based on the browser size so it is always like this:

|First Name      |Last Name|
|Street Address  |City     |

最终不会像

|First Name      |Last Name|  Street Address  |City     |

https://codesandbox.io/s/0q7kw76nyl

import React from "react";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";

const styles = theme => ({
  textField: {
    marginLeft: theme.spacing.unit,
    marginRight: theme.spacing.unit
  }
});

class TextFields extends React.Component {
  state = {
    firstName: "",
    lastName: "",
    street: "",
    city: ""
  };

  handleChange = name => event => {
    this.setState({ [name]: event.target.value });
  };

  render() {
    const { classes } = this.props;

    return (
      <form className={classes.container} noValidate autoComplete="off">
        <TextField
          id="first-name"
          label="First Name"
          className={classes.textField}
          value={this.state.firstName}
          onChange={this.handleChange("firstName")}
          margin="normal"
        />

        <TextField
          id="last-name"
          label="Last Name"
          className={classes.textField}
          value={this.state.lastName}
          onChange={this.handleChange("lastName")}
          margin="normal"
        />

        <TextField
          id="address-street"
          label="Street Address"
          className={classes.textField}
          value={this.state.street}
          onChange={this.handleChange("street")}
          margin="normal"
        />

        <TextField
          id="address-city"
          label="City"
          className={classes.textField}
          value={this.state.city}
          onChange={this.handleChange("city")}
          margin="normal"
        />
      </form>
    );
  }
}

TextFields.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(TextFields);

推荐答案

如上所述，放入div效果很好.

As above, putting into divs work great.

您还可以将它们放在Grid布局中以进行其他自定义.

You can also put them inside a Grid layout for additional customization.

网格布局还具有一些巧妙的附加功能，例如项目的间距和对齐方式，可自定义的项目宽度，这是文档.

The grid layout has some neat additional such as spacing and justification of items, customizable items width, here's the documentation.

import Grid from '@material-ui/core/Grid'
<Grid container>
     <Grid item xs={6}> 
         ... 
     </Grid>
     <Grid item xs={6}>
         ...
     </Grid>
</Grid>

这篇关于如何使用React Material-UI创建2列表单?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！