0
votes

l'opérateur ternaire n'écoute pas l'état local

Je veux que mon nom de classe change lorsque je passe la souris sur mon div. Si la console enregistre l'état, il passe de vrai à faux en fonction de la position de la souris. Lorsque j'essaie de l'utiliser avec un opérateur ternaire, il se définit toujours sur false?

import React, { useState } from 'react';
function NavigationBar() {
  const [hover, setHover] = useState({hover: false})

  const noHovering = 'flex flex-row bg-white'
  const hovering = 'flex flex-row bg-black'
  return (
  <div className='h-screen max-h-screen w-1/6 float-left shadow-2xl flex flex-col' style={{backgroundColor: '#2b2b2b'}}>
    <div className='h-20 flex justify-center items-center' style={{backgroundColor:'#202020'}}>
      <h1 className='text-white items-center font-hairline tracking-widest text-lg'>{hover === true ? "NOT WOKRING" : 'PREVENTION ADMIN'}</h1>
    </div>
    <div className='pl-4 h-full flex flex-col justify-around'>
      <div className= {hover ? hovering : noHovering} onMouseOver={() => setHover({hover:true})} onMouseLeave={() => setHover({hover:false})}>
        <img src={require('../../images/analysis-gray.png')} alt='analysis' className='mr-5 w-6'/> 
        <h5 className='antialiased' style={{color:'#c8c8c8'}} >Insights</h5>
      </div>

javascript reactjs state ternary

1 commentaires

Je pense que vous initialisez votre état d'une manière incorrecte. Essayez ceci - const [hover, setHover] = useState (false)

4 Réponses :

0
votes

L'opérateur ternaire renvoie toujours vrai parce que vous vérifiez l'instance hover qui est une valeur de vérité.

En fonction de la façon dont vous avez défini votre état, vous devez vérifier le champ hover avec hover.hover

    const [hover, setHover] = useState(false)
    <div 
     className= {hover ? hovering : noHovering} 
     onMouseOver={() => setHover(true)} 
     onMouseLeave={() => setHover(false)}>
    ..
    </div>

Ou, alternativement, passez à une valeur booléenne qui simplifie les choses:

    const [hover, setHover] = useState({hover: false})
    <div 
     className= {hover.hover ? hovering : noHovering} 
     onMouseOver={() => setHover({hover:true})} 
     onMouseLeave={() => setHover({hover:false})}>
    ..
    </div>

0 commentaires

0
votes

survole? ... renvoie toujours true car c'est un objet {hover: false} , vous n'avez pas besoin d'un objet ici, changez votre état en: XXX

et lorsque vous souhaitez définir hover :

hover.hover ? hovering : noHovering

Si vous souhaitez le conserver en tant qu'objet, changez simplement votre condition en:

setHover(true)
// Or
setHover(false)

0 commentaires

0
votes

Je ne pense pas qu'il soit nécessaire d'avoir l'état hover en tant qu'objet, puis de lire la propriété à l'intérieur. Vous pouvez simplement le faire comme ceci: -

const [hover, setHover] = useState(false);
const noHovering = 'flex flex-row bg-white'
const hovering = 'flex flex-row bg-black'

<div 
 className= {hover? hovering : noHovering} 
 onMouseOver={() => setHover(true)} 
 onMouseLeave={() => setHover(false)}>
..
</div>

0 commentaires

0
votes

Si vous souhaitez conserver la forme de l'état actuel, utilisez simplement un affectation déstructurée pour extraire la propriété hover :

//     v       v  extract hover property from state 
const [{ hover }, setHover] = useState({hover: false})

0 commentaires