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
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;
Exemple 2
Récuper la valeur d'un input la sauvegarder dans la variable State
State avec un objet complexe
Créer la component ExempleState2 permettant de changer du state avec un objet complexe
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;