onClick事件更改类名反应js

Posted 2023-03-16

【中文标题】onClick事件更改类名反应js

【英文标题】：onClick event change class name react js

【发布时间】：2021-03-26 23:35:02

【问题描述】：

我正在尝试更改从地图循环创建的元素的颜色。 如何通过单击仅更改其中一个？ 当我登录和退出组件时，如何保持颜色不变？

我尝试使用钩子，但是一旦你点击元素，创建的每个元素都是绿色而不是红色。

元素应该是红色的，并通过点击从红色变为绿色。创建的每个新元素都应该是红色的。

请帮助This is what it looks like

import Link from 'react-router-dom'
import Bulb from '@styled-icons/ionicons-outline/Bulb'
import HotTub from '@styled-icons/material-twotone/HotTub'
import Radio from '@styled-icons/zondicons/Radio'
import Fan from '@styled-icons/fa-solid/Fan'

export default function Rooms(props) 

    const [flag, setFlag] = useState('off')
    
    const newArr = props.arr[props.index].appliances
    const [arr, setArr] = useState([props.arr[props.index].appliances])
    const [disply, setDisply] = useState('none')
    const [applist, setAppList] = useState()

    let disFunc = () => 
        if(disply === 'none') 
            setDisply('block')
         else 
            setDisply('none')
        
    

    let colorApp = (item, index) => 
       setIconStyle()
    
    
    let appliances = (e) => 
        let eventValue = e.target.value

        if(eventValue === '<Fan/>' ) 
            setAppList([<Fan/>])
         else if(eventValue === '<HotTub/>') 
            setAppList([<HotTub/>])
        
        else if(eventValue === '<Radio/>') 
            setAppList([<Radio/>])
        
        else if(eventValue === '<Bulb/>') 
            setAppList([<Bulb/>])
               
    

    let newAppliances = () => 
        props.funcApp(applist, props.index)
    

    let chengefalg = () => 
        props.colorFunc(1)
    

    return (
        <div>
            <h1>Smart House</h1>
            
            <Link to='/'><p>props.index</p></Link>
            <p>Room type: props.type</p>
            <p>Room name: props.name</p>
            <button onClick=disFunc>Add appliances</button><br/><br/><br/>

            <div style=display: disply>
                <select onChange=appliances>
                    <option selected value="4">Add</option>
                    <option value='<Fan/>'>Air-Conditioner</option>
                    <option value='<HotTub/>'>boilermaker</option>
                    <option value='<Radio/>'>stereo system</option>
                    <option value='<Bulb/>'>lamp</option>
                </select>
                <button onClick=newAppliances>Add</button>
            </div>

            newArr.map((item,index) => (
                <p className=flag onClick=() => 
                    setFlag('on')
                >item</p>
            )) 
            
        </div>
    )

【参考方案1】：

给每个标志一个唯一的ID

id = `flag-$index`

然后将索引作为参数传递给 onClick 函数。

onClick= ()=> toggleFlag(index) 

然后添加只为这个标志更新类的函数：

toggleFlag = (index) => 
  document.getElementById(`flag-$index`).classList.toggle('on');

您也可以使用 css 逐渐改变颜色。

  -webkit-transition: all 1s ease;  
  -moz-transition: all 1s ease;  
  -o-transition: all 1s ease;  
  -ms-transition: all 1s ease;  
  transition: all 1s ease;

【讨论】：

非常感谢。它只工作了一半当我回到我添加电器的同一个房间时，它们不像以前那样保持绿色

【参考方案2】：

您还可以为 p - 标签制作另一个组件并在其中使用 useState

   ... 
       newArr.map((item, index) => (
            <PTag item=item></PTag>
          ))
        </div>
      );
    


    const PTag = ( item ) => 
      const [flag, setFlag] = useState('not_on');
      return (
        <p
          className=flag
          onClick=() => 
            setFlag(flag == 'not_on' ? 'on' : 'not_on');
          
        >
          item
        </p>
      );
    ;

【讨论】：

它给了我一个错误 React Hook "useState" cannot be called inside a callback.

是的，我现在已经编辑过了。我已经使用 Next.js 一个 React 框架对其进行了测试。成功了。