menu FixWins.com apps Spring MVC Spring Boot Angular Laravel ExpressJS ReactJS PFE list

Exercices

LocalStorage Weather Api ToDo et LocalStorage

React+ionic

Ionic Create project 4.React Outils utiles 5.Lifecycle Methods 6.JSX

Gestion Ventes

Produit CRUD

6.Form :Ajouter un produit 8.Liste produits 9.Pagination 10.Liste produits +Pagination 11.Liste produits +Datatable 11.Liste produits +load more 12.Supprimer un produit 14.Details d'un produit 15.Recherche et Autocomplete

Reacts:Utils

Gestion des erreurs Variables d'environment Cookies Internationalization proptypes Form validation React Animation Fragment Google Maps

Utilisateur CRUD

18.Inscription upload file 19.Connexion et Les sessions 19.Connexion: JWT Token

Ventes CRUD

17.Vendre un produit 18.Facture Generate PDF 19.Statisques Charts

Redux





React:Changer la valeur du State

State avec un objet Simple

Créer la component ExempleState1 permettant de changer du state avec un objet simple

npx crcf components/ExempleState1

ExempleState1.js

import React, { Component } from "react";

class ExempleState1 extends Component {
  constructor(props)
  {
    super(props)
    this.state={
      variable1:''
    }
   
  }
  //fin constructeur
 
  changerVariable1=(event)=>
  {
    this.setState({
      variable1:"Nouvelle Valeur"
    })
  }
 
  render() {
    return (
      <div>
      variable1={this.state.variable1}
      <input  type="button" onClick={this.changerVariable1} value="Changer Variable1"/>
     
      </div>)
      ;
    }
  }

export default ExempleState1;

App.js

  import React from 'react';
  import './App.css';
  import ExempleState1 from './components/ExempleState1/ExempleState1';
  class  App extends React.Component{
    constructor(props)
    {
      super(props);
     
    }
   
    render()
    {
      return (
        <div>
        <ExempleState1 />
        </div>
        );
      }
    }
    export default App;

npm start

Exemple 2

Récuper la valeur d'un input la sauvegarder dans la variable State

import React, { Component } from 'react';

class InputForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: ''
    };
  }

  handleInputChange = (e) => {
    this.setState({ inputValue: e.target.value });
  }

  handleSubmit = (e) => {
    e.preventDefault();
    alert('You submitted: ' + this.state.inputValue);
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input
          type="text"
          value={this.state.inputValue}
          onChange={this.handleInputChange}
        />
        <button type="submit">Submit</button>
      </form>
    );
  }
}

export default InputForm;

Exemple 3

import { Component } from "react";
class From2State extends Component{
    constructor()
    { super();
        this.state={
            nom:"",
            prenom:"",
        }

    }
     changerNom=(event)=>{
           this.setState({
            nom:event.target.value
           }) 
        }

     changerPrenom=(event)=>{
            this.setState({
                prenom:event.target.value
            })
        }
    
    render()
    {
        return(<div>
          Nom  <input type="text" onChange={this.changerNom}/><br/>
          Prénom <input type="text" onChange={this.changerPrenom}/><br/>

          Votre nom est :{this.state.nom}<br/>
          Votre Prénom est :{this.state.prenom}

        </div>)
    }
}
export default From2State;

Exercice

Créer une calculatrice de la forme

State avec un objet complexe

Créer la component ExempleState2 permettant de changer du state avec un objet complexe

npx crcf components/ExempleState2

ExempleState2.js

import React, { Component } from "react";

class ExempleState2 extends Component {
  constructor(props)
  {
    super(props)
    this.state={
      produit:{
        libelle:'produit1',
        prix:45.41,
        marque:'marque1'
      }
    }
  }
    changerLibelle=(event)=>
    {
      this.setState({
        produit:{
          ...this.state.produit, /*Récuper le produit courant */
          libelle:"Nouvelle libelle"} /*Puis changer la valeur d'un attribut */
      })
    }


    changerPrix=(event)=>
    {
      this.setState({
        produit:{
          ...this.state.produit,
          prix:210}
      })
    }

    changerMarque=(event)=>
    {
      this.setState({
        produit:{
          ...this.state.produit,
          marque:"Nouvelle marque"}
      })
    }

 
  render() {
    return (
    <div>
   Libelle:        {this.state.produit.libelle}
    <input type="button" onClick={this.changerLibelle} value="Changer"/>
   
   <br/>Libelle:   {this.state.produit.prix}
    <input type="button" onClick={this.changerPrix} value="Changer"/>

   <br/>Libelle:   {this.state.produit.marque}
   <input type="button" onClick={this.changerMarque} value="Changer"/>

    </div>);
  }
}

export default ExempleState2;

App.js

  import React from 'react';
  import './App.css';
  import ExempleState2 from './components/ExempleState2/ExempleState2';
  class  App extends React.Component{
    constructor(props)
    {
      super(props);
     
    }
   
    render()
    {
      return (
        <div>
        <ExempleState2 />
        </div>
        );
      }
    }
    export default App;
npm start