英文:
React state hook, toogle class, why are both elements getting the "active" class?
问题
希望你可以帮助我。
为什么我的两个li元素都被应用了active类？
import React, { useState } from "react";import "./styles.css";const App = () => {const [active, setActive] = useState("false");const creditValues = [{month: 6,monthly: 102.72,interest: 24.36,cost: 616.32,total: 591.96},{month: 12,monthly: 53.15,interest: 24.36,cost: 616.32,total: 591.96}];return (<ul className="monthly-instalments">{creditValues.map(creditValue => (<liclassName={setActive ? "active" : "notactive"}data-month={creditValue.month}data-interval={creditValue.interval}data-apr={creditValue.apr}data-monthly={creditValue.monthly}data-interest={creditValue.interest}data-cost={creditValue.cost}data-total={creditValue.total}onClick={() => setActive(!active)}>{creditValue.month} months</li>))}</ul>);};export default App;
英文:
Hope you can help me.
Why are both my li elements getting the active class applied to it?
import React, { useState } from "react";import "./styles.css";const App = () => {const [active, setActive] = useState("false");const creditValues = [{month: 6,monthly: 102.72,interest: 24.36,cost: 616.32,total: 591.96},{month: 12,monthly: 53.15,interest: 24.36,cost: 616.32,total: 591.96}];return (<ul className="monthly-instalments">{creditValues.map(creditValue => (<liclassName={setActive ? "active" : "notactive"}data-month={creditValue.month}data-interval={creditValue.interval}data-apr={creditValue.apr}data-monthly={creditValue.monthly}data-interest={creditValue.interest}data-cost={creditValue.cost}data-total={creditValue.total}onClick={() => setActive(!active)}>{creditValue.month} months</li>))}</ul>);};export default App;
答案1
得分: 3
在你目前的示例中，两个列表项共享相同的状态。
因此，在每次渲染时，切换状态将反映在两个<li/>项上。
你希望每个列表项都有自己的active状态。
请注意，你有一些错误，如字符串'false'，将className与setActive函数进行比较，以及没有noactive CSS类。
import React, { useState } from 'react';import './styles.css';const creditValues = [{month: 6,monthly: 102.72,interest: 24.36,cost: 616.32,total: 591.96,},{month: 12,monthly: 53.15,interest: 24.36,cost: 616.32,total: 591.96,},];const Item = ({ children }) => {const [active, setActive] = useState(false);return (<liclassName={active ? 'active' : 'noactive'}onClick={() => setActive(prevActive => !prevActive)}>{children}</li>);};const App = () => {return (<ul className="monthly-instalments">{creditValues.map((creditValue, index) => (<Item key={index}>{creditValue.month} months</Item>))}</ul>);};export default App;
英文:
In your current example, both list items share the same state.
Therefore, on each render, toggling the state will reflect both <li/> items.
You want each list item to have its own active state.
Note that you have some bugs like string 'false', comparing the className with setActive function and not having the noactive CSS class.
import React, { useState } from 'react';import './styles.css';const creditValues = [{month: 6,monthly: 102.72,interest: 24.36,cost: 616.32,total: 591.96,},{month: 12,monthly: 53.15,interest: 24.36,cost: 616.32,total: 591.96,},];const Item = ({ children }) => {const [active, setActive] = useState(false);return (<liclassName={active ? 'active' : 'noactive'}onClick={() => setActive(p => !p)}>{children}</li>);};const App = () => {return (<ul className="monthly-instalments">{creditValues.map((creditValue, index) => (<Item key={index}>{creditValue.month} months</Item>))}</ul>);};export default App;
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论