Bonjour les amis,

je commence avec reactJS pour découvrir. J'essaye de faire un formulaire, mais j'ai un problème avec l'affichage des erreurs sur mon console.log mon tableau s'affiche avec les bonnes valeur ! mais sur la page rien ne bouge !

voici mon formulaire.js qui cree le formulaire et sa verification (j'ai utilisé material ui avec )

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import CssBaseline from '@material-ui/core/CssBaseline';
import Paper from '@material-ui/core/Paper';
import Typography from '@material-ui/core/Typography';
import Radio from '@material-ui/core/Radio';
import RadioGroup from '@material-ui/core/RadioGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import FormControl from '@material-ui/core/FormControl';
import Input from '@material-ui/core/Input';
import InputLabel from '@material-ui/core/InputLabel';
import Button from '@material-ui/core/Button';

const styles = theme => ({
  layout: {
    width: 'auto',
    display: 'block',
    marginLeft: theme.spacing.unit * 3,
    marginRight: theme.spacing.unit * 3,
    [theme.breakpoints.up(400 + theme.spacing.unit * 3 * 2)]: {
      width: 400,
      marginLeft: 'auto',
      marginRight: 'auto',
	},
  },
  paper: {
    marginTop: theme.spacing.unit * 8,
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    padding: `${theme.spacing.unit * 2}px ${theme.spacing.unit * 3}px ${theme.spacing.unit * 3}px`,
  },
  form: {
    width: '100%',
    marginTop: theme.spacing.unit,
  },
  formControl: {
    margin: theme.spacing.unit * 1,
  },
  group: {
  	display: 'flex',
  	flexDirection: 'row',
    margin: `${theme.spacing.unit}px 0`,
  },
  submit: {
    marginTop: theme.spacing.unit * 3,
  },
  erreur: {
    color: 'red',
  }
});

const emailRegex = /^[a-z0-9._-]+@[a-z0-9._-]+\.[a-z]{2,3}$/;
const telRegex = /^(06|07)[0-9]{8}$/;
const alphaOnlyRegex = /^[A-Za-z]+$/;
const dateRegex = /(\d+)(-|\/)(\d+)(?:-|\/)(?:(\d+)\s+(\d+):(\d+)(?::(\d+))?(?:\.(\d+))?)?/;

class Formulaire extends React.Component {

  state = {
    civilite: "MME",
    nom: "",
    prenom: "",
    email: "",
    tel: "",
    date: "",
  };

  erreur = {
    nom: "",
    prenom: "",
    email: "",
    tel: "",
    date: "",
  };

   handleChange = e => {
    this.setState({ civilite: e.target.value });
   };

   Change = e => {

    this.erreur = {
    nom: "",
    prenom: "",
    email: "",
    tel: "",
    date: "",
    };

    this.setState({ [e.target.name]: e.target.value });
  };

  onSubmit = e => {

      if( (!alphaOnlyRegex.test(this.state.nom)) || (!alphaOnlyRegex.test(this.state.prenom)) || (!emailRegex.test(this.state.email)) || (!telRegex.test(this.state.tel)) || (!dateRegex.test(this.state.date)) ) {
        
          if( (!alphaOnlyRegex.test(this.state.nom)) ){
            e.preventDefault();
            this.erreur.nom = "Le nom doit comporter uniquement des lettres"
            console.log(this.erreur);
          }
      }
      else{
        console.log(this.erreur);
        e.preventDefault();
        this.props.onSubmit(this.state);

        this.setState({
          civilite: "MME",
          nom: "",
          prenom: "",
          email: "",
          tel: "",
          date: "",
        });
      }
  };


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

    return (

    	<React.Fragment>

    		<CssBaseline />
    		<main className={classes.layout}>

    			<Paper className={classes.paper}>

    				<Typography variant="headline">Formulaire MOSAIC</Typography>
    				<form className={classes.form}>

	    				<FormControl component="fieldset" className={classes.formControl}>
					          <RadioGroup
					            aria-label="Gender"
					            name="civilite"
					            className={classes.group}
					            value={this.state.civilite}
					            onChange={e => this.handleChange(e) }
					          >
						            <FormControlLabel value="MME" control={<Radio color="primary" />} label="MME" />
						            <FormControlLabel value="M" control={<Radio color="primary" />} label="M" />
					          </RadioGroup>
					    </FormControl>
					    <FormControl margin="normal" required fullWidth>
						    <InputLabel type="text" htmlFor="nom" >Nom</InputLabel>
						    <Input id="nom" value={this.state.nom} onChange={e => this.Change(e) } name="nom" />
                <span className={classes.erreur}>{this.erreur.nom}</span>
						</FormControl>
						<FormControl margin="normal" required fullWidth>
						    <InputLabel htmlFor="prenom">Prénom</InputLabel>
						    <Input id="prenom" value={this.state.prenom} onChange={e => this.Change(e) } name="prenom" />
						</FormControl>
						<FormControl margin="normal" required fullWidth>
						    <InputLabel htmlFor="email">Email</InputLabel>
						    <Input id="email" value={this.state.email} onChange={e => this.Change(e) } name="email" />
						</FormControl>
						<FormControl margin="normal" required fullWidth>
						    <InputLabel htmlFor="tel">Téléphone</InputLabel>
						    <Input id="tel" value={this.state.tel} onChange={e => this.Change(e) } name="tel" />
						</FormControl>
						<FormControl margin="normal" required fullWidth>
						    <InputLabel htmlFor="date">Date</InputLabel>
						    <Input id="date" value={this.state.date} onChange={e => this.Change(e) } name="date" />
						</FormControl>
						<Button
						    type="submit"
						    fullWidth
						    variant="raised"
						    color="primary"
						    className={classes.submit}
						    onClick={e => this.onSubmit(e)}
						   >
						    SAUVEGARDE
						</Button>

				    </form>
				       
    			</Paper> 

      		</main>
    	</React.Fragment>
    );
  }
}

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

export default withStyles(styles)(Formulaire);

et voici mon app.js qui me genere mon formulaire et qui m'affiche mon tableau quand le formulaire est bien rempli

import React, { Component } from 'react';
import "./App.css"; 
import Formulaire from "./Formulaire";

class App extends Component {

	state = {
    	fields: {}
  	};
 
	onSubmit = fields => {

		this.setState({ fields });
	};

	render() {
		return (
			<div className="App">
				<Formulaire onSubmit={ fields => this.onSubmit(fields) } />
				<p>{ JSON.stringify(this.state.fields, null, 2) }</p>
			</div>
		);
	}
}

export default App

Merci de votre aide les amis

Je relance

Salut,

Ton erreur est assez simple, tu n'utilises pas le state pour gérer tes erreurs du coup ton affichage n'est jamais rendu à nouveau si leurs valeurs changent. Il te faut ajouter par exemple une variable erreurNom, erreurAdresse,... dans ton state et en modifier sa valeur avec un this.setState({erreurNom : valeur }). De cette façon le rendu sera demandé à nouveau et la nouvelle valeur sera bien affichée.

Bonjour,

Merci de ton conseil, je comprend mieux l'utilité de state maintenant, tout fonctionne maintenant !

Une dernière question :

j'ai un formulaire en reactJS qui retourne les valeur en JSON lorsqu'on clique sur sauvegarde, je souhaite crée un projet en symfony (2/3/4) et apeller mon fichier reactJS (qui contient le formulaire uniquement), pour que mon formulaire s'affiche sur mon projet symfony et qu'il récupére le fichier JSON lorsqu'on le formulaire est bien rempli et qu'il l'ajoute dans une bdd a l'aide d'ajax !

j'ai fait des recherches pour marier symfony a react, mais je ne trouve pas comment faire.

Si vous avez quelque tuto ou de la docs a lire je suis preneur

Merci a vous (y)

En fait c'est très simple de faire ça, dans ta méthode ReactDOM.render(<MyReactComponent />, document.getElementById("root")), il te suffit de modifier l'élément cible par n'importe quel autre élément html contenu dans ta page (le formulaire dans ton cas). Bien évidemment, il faut également prévoir d'inclure le fichier js contenant le code react dans le html de cette même page. De cette façon tu peux facilement avoir un composant géré par React dans une page web générée par PHP de n'importe quel framework.

Merci pour tout ! Je vais me renseigner plus profondément sur le sujet. je te remercie encore pour l’aide que tu ma appporté

@MaxNgassa Bonjour, merci de ne pas déterrer d'ancien sujet pour une nouvelle question. Créer le votre dans le respect des règles du forum à savoir que pour l'insertion de code il faut utiliser le bouton code </> de la barre d'outil du forum.

Déterrage

Citation des règles générales du forum :

Avant de poster un message, vérifiez la date du sujet dans lequel vous comptiez intervenir.

Si le dernier message sur le sujet date de plus de deux mois, mieux vaut ne pas répondre.
En effet, le déterrage d'un sujet nuit au bon fonctionnement du forum, et l'informatique pouvant grandement changer en quelques mois il n'est donc que rarement pertinent de déterrer un vieux sujet.

Au lieu de déterrer un sujet il est préférable :

• soit de contacter directement le membre voulu par messagerie privée en cliquant sur son pseudonyme pour accéder à sa page profil, puis sur le lien "Ecrire un message"
• soit de créer un nouveau sujet décrivant votre propre contexte
• ne pas répondre à un déterrage et le signaler à la modération

Je ferme ce sujet. En cas de désaccord, me contacter par MP.