1
votes

Comment créer un formulaire à 2 colonnes avec React Material-UI?

Je crée un formulaire de réaction avec material-ui.

Je voudrais que le formulaire soit une vue fixe à 2 colonnes et non un flux basé sur la taille du navigateur, donc c'est toujours comme ça:

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);

Et pas finir comme

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

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

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

reactjs material-ui

0 commentaires

3 Réponses :

2
votes

Essayez de séparer les deux groupes en divs comme ceci:

https://codesandbox.io/s/ vy6k6w1jq3

<div>
 <TextField/>
 <TextField/>
</div>
<div>
 <TextField/>
 <TextField/>
</div>

2 commentaires

Cela semble plus propre et plus simple et fonctionne dans le bac à sable, mais étrangement, pour une raison quelconque, ne reste pas le même dans la page plus compliquée (ils deviennent des groupes verticaux au lieu d'horizontales!). Je vais donc devoir utiliser Grids.

@opticyclic oui j'espérais que la solution la plus simple suffirait. Grid / Flexbox ferait l'affaire

8
votes

Comme ci-dessus, la mise en divs fonctionne très bien.

Vous pouvez également les placer dans une disposition Grille pour une personnalisation supplémentaire.

La disposition en grille a quelques détails supplémentaires tels que l'espacement et la justification des éléments, largeur des éléments personnalisable, voici la documentation .

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

0 commentaires

1
votes

Vous pouvez utiliser le conteneur Grid et l'élément en même temps.

<Grid container spacing={2} >
  <Grid container item xs={6} direction="column" >
    <TextField />
    <TextField />
    <TextField />
  </Grid>
  <Grid container item xs={6} direction="column" >
    <TextField />
    <TextField />
  </Grid>
</Grid>

0 commentaires