在 React javaScript 中面临管理状态的问题

Question

我正在尝试切换“checked-radio-btn”类并显示或隐藏基于该类的一些内容。它会在第一次单击时应用，但在选择另一个元素时不会从前一个元素中删除。我只想一次只选择一个元素。

完整代码的 gitHub 链接 - https://github.com/Mazhar1857/practice

函数 ProjectItem({ 产品名称、totalPledge、产品描述、totalLeft、索引 }) {

const [isActive, setIsActive] = useState('')

useEffect(() => {
    console.log(isActive)
}, [isActive]);

const handleCheckedProduct = (value) => {
    setIsActive(value);
}

return (
    <div className={`product ${index === isActive ? 'checked-radio-btn' : ''} ${index}`} >
        <input type="radio" name='product' id={productName} value={totalPledge} onClick={() => { handleCheckedProduct(index) }} />
        <label className='radio-btn' htmlFor={productName} onClick={() => { handleCheckedProduct(index) }}></label>
        <div className='product-name'>
            <label htmlFor={productName} onClick={() => { handleCheckedProduct(index) }}>{productName}</label><span>Pledge ${totalPledge} or more</span>
        </div>
        <div className='product-left'>
            <span>{totalLeft}</span><span>left</span>
        </div>
        <div className='product-description'>{productDescription}</div>
        <div className={`back-product ${index === isActive ? 'checked-radio-btn' : ''}`}>
            <div>Enter your pledge</div>
            <div className='project-pledge-btn' >
                <div className='project-input-btn'>
                    <input type='text' defaultValue={totalPledge} />
                </div>
                <button>continue</button>
            </div>
        </div>
    </div>
)

}

组件的状态没有更新，基于此我试图切换我的类

Answer 1

如果您有多个项目，并且只有其中一项处于活动状态，则必须在父组件中定义状态并将值传递给项目。此外，您可以将一些函数作为道具传递给项目组件，您可以在项目组件中调用这些函数来改变状态。这是一个例子：

const items = [
    {id: 1, name: "one" },
    {id: 2, name: "two" },
    {id: 3, name: "three" },
];

function ParentComponent() {
    const [activeId, setActiveId] = useState(items[0].id);

    return <>
        {items.map(({id, name}) => 
            <Item 
                key={id} 
                isActive={activeId === id} 
                onSelect={() => setActiveId(id)}
                name={name}
            />
        )}
    </>
}

function Item({ id, isActive, onSelect, name }){
    return <p onClick={() => onSelect()}>
        {name} is {isActive ? "": "not"} active
    </p>
}