React使组件显示在列中

Question

我对 React 来说还很陌生，我正在使用 material-ui 制作我的第一个应用程序，并且我已经设法渲染了我想要的组件，但是我没有无法将它们堆叠打印，它们显示为一行：

我尝试用 div 和 p 将它们包装起来，但得到的结果相同。

这是我组件的代码：

import React, { Component } from 'react';
import Button from '@material-ui/core/Button';
import classNames from 'classnames';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Input from '@material-ui/core/Input';
import InputLabel from '@material-ui/core/InputLabel';
import InputAdornment from '@material-ui/core/InputAdornment';
import FormControl from '@material-ui/core/FormControl';
import Visibility from '@material-ui/icons/Visibility';
import VisibilityOff from '@material-ui/icons/VisibilityOff';
import IconButton from '@material-ui/core/IconButton';

const styles = theme => ({
  root: {
    display: 'flex',
    flexWrap: 'wrap',
  },
  margin: {
    margin: theme.spacing.unit,
  },
  withoutLabel: {
    marginTop: theme.spacing.unit * 3,
  },
  textField: {
    flexBasis: 200,
  },
  button: {
    margin: theme.spacing.unit,
  },
  input: {
    display: 'none',
  },
});

class LoginModal extends Component {
  state = {
    password: '',
    showPassword: false,
  };

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

    return (
      <div className={classes.root}>
        <h1>Welcome to My App...</h1>
        <FormControl className={classNames(classes.margin, classes.textField)}>
          <InputLabel htmlFor="adornment-email">eMail</InputLabel>
          <Input i
            d="adornment-email"
            variant="filled"
          />
        </FormControl>
        <FormControl className={classNames(classes.margin, classes.textField)}>
          <InputLabel htmlFor="adornment-password">Password</InputLabel>
          <Input
            id="adornment-password"
            variant="filled"
            type={this.state.showPassword ? 'text' : 'password'}
            value={this.state.password}
            endAdornment={
              <InputAdornment position="end">
                <IconButton
                  aria-label="Toggle password visibility"
                  onClick={this.handleClickShowPassword}
                >
                  {this.state.showPassword ? <Visibility /> : <VisibilityOff />}
                </IconButton>
              </InputAdornment>
            }
          />
          <p><a href="#">Did you forget your password?</a></p>
          <Button color="primary" variant="contained">Login</Button>
        </FormControl>
      </div>
    );
  };
}

LoginModal.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(LoginModal);

只有两个最新的组件堆叠在一起，而其余的则排成一行。

如何指示反应以堆叠方式显示组件？

Answer 1

将您的update Orders set delivery = 'Y' where Name in (SELECT NAME FROM (SELECT NAME, SUM(PRICE) TOTAL_PRICE FROM ORDERS GROUP BY NAME HAVING SUM(PRICE)> 88) A ) 样式更新为：

root

您可能需要调整其他弹性属性才能获得所需的对齐方式。

Answer 2

我发现 Material-UI 使用 Grid 组件来管理响应性，并且可以使用它来安排显示对象。

这就是我使用 Grid 来显示对象的方式：

class LoginModal extends Component {
  state = {
    password: '',
    showPassword: false,
  };

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

    return (
      <div className={classes.root}>
        <Grid container spacing={24}>
          <Grid item xs={12}>
            <h1>Welcome to My App...</h1>
          </Grid>
          <Grid item xs={12}>
            <FormControl className={classNames(classes.margin, classes.textField)}>
              <InputLabel htmlFor="adornment-email">eMail</InputLabel>
              <Input
                id="adornment-email"
                variant="filled"
              />
            </FormControl>
          </Grid>
          <Grid item xs={12}>
            <FormControl className={classNames(classes.margin, classes.textField)}>
              <InputLabel htmlFor="adornment-password">Password</InputLabel>
              <Input
                id="adornment-password"
                variant="filled"
                type={this.state.showPassword ? 'text' : 'password'}
                value={this.state.password}
                endAdornment={
                  <InputAdornment position="end">
                    <IconButton
                      aria-label="Toggle password visibility"
                      onClick={this.handleClickShowPassword}
                    >
                      {this.state.showPassword ? <Visibility /> : <VisibilityOff />}
                    </IconButton>
                  </InputAdornment>
                }
              />
              <p><a href="#">Did you forget your password?</a></p>
              <Button color="primary" variant="contained">Login</Button>
            </FormControl>
          </Grid>
        </Grid>
      </div>
    );
  };
}

这是结果：