Forum : ReactJS besoin d'aide

Bonjourà tous,

Je rencontre un petit problème avec mon code.

Mon code

return (
<div className="container" style={containerStyles}>
<div className="resultat">
<div className="readout">
<div style={{ height: 50,, width:500, background:"rgb(120,152,250)"}}>{this.state.red}</div>
<span className="red"> Red :</span><span>{this.state.red}</span><span className="green"> Green :</span><span>{this.state.green}</span> <span className="blue"> Blue :</span><span>{this.state.blue}</span>
</div>
<div className="sliders">
<input onChange={this.changered.bind(this)} type="range" max="255" value={this.state.red}/>
<input onChange={this.changeGreen.bind(this)} type="range" max="255" value={this.state.green}/>
<input onChange={this.changeBlue.bind(this)} type="range" max="255" value={this.state.blue}/>
</div>
</div>
</div>

Ce que je veux

Je souhaiterais donc mettre les Values this.state.red (green et blue) en paramètre RGB pour changer la couleur du fond en fonction de mes inputs.

Ce que j'obtiens

J'essaie mais celà m'indique que ça n'"Expecte" pas : this.

Merci de votre futur aide :)

3 réponses

Mickael Christine,

il y a 5 ans

Hello, artch95, aurai-tu un peu plus de code pour voir à quoi correspond ton state et tes fonctions change red/green/blue deja stp

artche95,

il y a 5 ans

Bonjour, je pense que comme ça, ça ira mieux : https://codepen.io/arthur-chevance/pen/vYyJoEE

Attentention ça pique un peu les yeux :)

Mickael Christine,

il y a 5 ans

Ok je comprends mieux maintenant, du coup tu fais ça comme ceci.

Apres si on veut un peut revoir ton code

class App extends React.Component { constructor() { super(); this.state = { red: "000", green: "000", blue:"000", } this.changered = this.changered.bind(this) // Tu bind une fois ton this dans le constructeur au lieu de 3 fois dans chaque input } // Tu vires tous tes calculs de si = 0 ou si sup à 100 etc, c'est du rgb 0 = noir, 00 = noir, 000 = noir // et tu ne créer qu'une seul fonction qui va se charger de modifier tes 3 valeurs changered(e) { this.setState({ // apres ajout d'un name dans chaque input tu peux determiner par le name quel input tu modif // et y associer sa valeur [e.target.name]: e.target.value }); } render() { let containerStyles = { color: "white", font: "0.7em Fira Sans, sans-serif", transition: "all .3s ease-in" }; return ( <div className="container" style={containerStyles}> <div className="resultat"> <div className="readout"> // Tu récup les valeurs de ton state avec la méthode Object.values qui va renvoyer un tableau des valeurs de ton objet (this.state) <div className="cadre" style={{ height: 100, width:100, background: `rgb(${Object.values(this.state)})` }}>test</div> <span className="red"> Red :</span><span>{this.state.red}</span> <span className="green"> Green :</span><span>{this.state.green}</span>  <span className="blue"> Blue :</span><span>{this.state.blue}</span>  </div> <div className="sliders"> // ici on ajoute un name à chaque input et un min value pour le cas ou tu place ton curseur à 0 <input onChange={this.changered} name="red" type="range" min="000" max="255" value={this.state.red}/> <input onChange={this.changered} name="green" type="range" min="000" max="255" value={this.state.green}/> <input onChange={this.changered} name="blue" type="range" min="000" max="255" value={this.state.blue}/> </div> </div> <h1 className ="titre"> Changez les curseurs afin d'obtenir une nouvelle couleur RVB ! </h1> <p>Projet réaliser pour DC - 2021 | Thomas RYBAK - Arthur CHEVANCE </p> </div> ); } }