1
votes

Opérateur conditionnel (ternaire)

J'ai un bouton qui générera une couleur aléatoire et définira l'état de couleur avec cette valeur de couleur.

Cet état de couleur sera ensuite utilisé pour définir la couleur d'arrière-plan du div.

À l'intérieur de la div, un bouton de verrouillage / déverrouillage définira l'état verrouillé sur vrai / faux;

Maintenant, la partie avec laquelle j'ai des problèmes consiste à utiliser un opérateur ténéral dans l'élément style:

ce que je veux qu'il fasse, c'est:

si déverrouillé: changez la couleur

si verrouillé: ne changez pas la couleur et gardez la même

p >

import React, { Fragment, useEffect, useState } from "react";

export default function Pallete({ changeColor }) {
const [locked, setLocked] = useState(false)
  const [color, setColor] = useState(
    "#" + (((1 << 24) * Math.random()) | 0).toString(16)
  );

  useEffect(() => {
    const randomColor = "#" + (((1 << 24) * Math.random()) | 0).toString(16);
    setColor(randomColor);
  }, [changeColor]);


const lockButton = () =>{
  setLocked(!locked)
}

  return (
    <Fragment>
      <div
        ***style={{ backgroundColor: !locked? color: color }}***
        className="w-100 d-flex flex-column align-items-center justify-content-center"
      >
        <h1>#FF00FF</h1>
        <button className="btn btn-dark" onClick={lockButton}>UNLOCK</button>
      </div>
    </Fragment>
  );
}

javascript reactjs

4 commentaires

lien: codesandbox.io/s/smoosh-water-l3oj0

avez-vous une erreur lorsque vous essayez d'utiliser la condition ternaire sur le style?

Voulez-vous spécifiquement des informations sur l'opérateur ternaire et pourquoi il ne fonctionne pas ici, ou simplement une solution qui fait fonctionner le code?

@KevinGilbert Non, il change la couleur si déverrouillé et supprime la couleur si verrouillé

3 Réponses :

1
votes

Option 1) comme vous l'avez dit ... avez-vous essayé?

<Component style={style} />

Option 2) avant l'instruction Return, définissez le style.

const style = foo ? '...' : '...'

1 commentaires

Je ne pense pas que cela fonctionne. La raison en est que: si! Verrouillé, il générera toujours une couleur aléatoire et ne conservera pas la même

2
votes

D'après ce que j'ai compris, voici la solution:

    useEffect(() => {

            if (!locked) {
               const randomColor = "#" + (((1 << 24) * Math.random()) | 0).toString(16);
               setColor(randomColor);
            }
            }, [changeColor, locked]);

, puis dans l'objet style, définissez l'arrière-plan en couleur sans opérateurs ternaires.

0 commentaires

3
votes

Je change deux parties de votre code:

style={{ backgroundColor: color }}

Vous pouvez supprimer le ! verrouillé? color: color partie aussi:

useEffect(() => {
    if(locked){ // check if its locked or not
      const randomColor = "#" + (((1 << 24) * Math.random()) | 0).toString(16);
      setColor(randomColor);
    }
}, [changeColor, locked]); // add locked to watch for

0 commentaires