onClick事件更改类名反应js
Posted
技术标签:
【中文标题】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 框架对其进行了测试。成功了。以上是关于onClick事件更改类名反应js的主要内容,如果未能解决你的问题,请参考以下文章
在 Laravel 中通过 js onclick 事件提交数据