Exercice:Style Dynamique
App.js
import React from 'react';
import './App.css';
class App extends React.Component{
constructor(props)
{
super(props);
this.state={
leStyle:{
width:'100px',
height:'100px',
background:'red',
borderRadius:'0px'
}
}
}
changerObjet=(e)=>{
let leType=e.target.name.toString();
let laValeur=e.target.value.toString();
let leRaduis="";
//si le shape est changé
if(leType=='shape')
{
if(laValeur=='carre')
{
leRaduis="0px";
}
else if(laValeur=='circle')
{
leRaduis="50%";
}
this.setState(
{
leStyle:{
...this.state.leStyle,
borderRadius:leRaduis
}
}
)
} //fin change shape
if(leType=="color")
{
this.setState(
{
leStyle:{
...this.state.leStyle,
background:laValeur
}
}
)
}
}
render()
{
return (
<div>
<fieldset>
<legend>Test Shapes</legend>
<table style={{width:'100%' }}>
<tr style={{width:'100%' }}>
<td>Shape</td>
<select name="shape" onChange={this.changerObjet} style={{width:'100%' }} >
<option disabled selected>Choisir le type du Shape</option>
<option value="circle">Cicle</option>
<option value="carre">Carré</option>
</select>
</tr>
<tr>
<td>Color</td>
<input type="color" name="color" onChange={this.changerObjet} style={{width:'100%' }}/>
</tr>
</table>
<hr/>
<div style={this.state.leStyle}></div>
</fieldset>
</div>
);
}
}
export default App;
