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

ExempleState1.js

App.js

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

ExempleState2.js

App.js

Exemple 2

import { Component } from "react";

class Calculatrice extends Component
{
    constructor()
    {
        super()
        this.state={
            num1:0,
            num2:0,
            resultat:0,
            afficher:false,
            operation:''
        }
    }
        getvalue=(event)=>{
            this.setState({
                [event.target.name]:Number(event.target.value),
                afficher:false
            })
        }

        plus=(event)=>{
            this.setState({
                operation:'+'
            })
        }

        moins=(event)=>{
            this.setState({
                operation:'-'
            })
        }
    egale=()=>{
        let r=0;
        if(this.state.operation=='+')
        {
        r=this.state.num1+this.state.num2
        }
        else if(this.state.operation=='-')
        {
        r=this.state.num1-this.state.num2
        }
 this.setState({
    resultat:r,
    afficher:true
 })
    }
    render()
    {
        return(<>
        <input type="number" name="num1" onChange={this.getvalue}/>
        <input type="button" name="plus" onClick={this.plus} value="+"/>
        <input type="button" name="moins" onClick={this.moins} value="-"/>
        <input type="number" name="num2" onChange={this.getvalue}/>
        <input type="button" onClick={this.egale} value="="/>
        <br/>
        num1={this.state.num1}
        <br/>
        num2={this.state.num2}
        <br/>
        =
        <br/>
        {
            (this.state.afficher==true? (<h1>{this.state.resultat}</h1>):'')
        }
        

        </>)
    }
}
export default Calculatrice

Exercice Quess the number

import { Component } from "react";

class RandomGame extends Component
{
    constructor()
    {
        super()
        this.state={
            message:'',
            nessais:0,
            userNombre:'',
            rand:Math.floor(Math.random()*10)
            

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

        }
verifier=(event)=>{

 if(Number(this.state.userNombre)==this.state.rand)
 {
   
this.setState({
    message:"Bravo",
  rand:Math.floor(Math.random()*10),
nessais:0

})
 }
 else if(Number(this.state.userNombre)>this.state.rand)
 
 {
    if(this.state.nessais>4)
    {
    this.setState({
        message:"plus petit",
        nessais:this.state.nessais+1

    })
    }
    else
    {
        this.setState({
           message:"vous avez perdu",
  rand:Math.floor(Math.random()*10),
nessais:0  
        })
    }
 }

 else 
 
 { if(this.state.nessais>4)
    {
    this.setState({
        message:"plus  grand",
        nessais:this.state.nessais+1

    })
    }
    else
    {
        this.setState({
           message:"vous avez perdu",
  rand:Math.floor(Math.random()*10),
nessais:0  
        })
    }
 }
}
    
    render()
    {
        return(>>
        {this.state.rand}
        >h1>nombre essaies:{this.state.nessais}>/h1>
        >input type="number" name="userNombre" onChange={this.getValue} />
        >input type="button" onClick={this.verifier} value="verifier"/>
        {this.state.message}
        >/>)
    }
}
export default RandomGame