將第一個元素設定為在加載時顯示，然后在單擊另一個React時隱藏

我有一個團隊成員串列，每個團隊成員圖塊都有一個疊加層，單擊時會隱藏它以顯示它是活動的，并帶有一個相關的文本框來顯示有關它們的資訊。我正在努力了解如何制作它，因此第一個將隱藏疊加層并在加載時顯示內容，然后當您進行另一個選擇時，它將添加到疊加層中并隱藏內容。

目前我有它，所以當你點擊一個圖塊時，它會隱藏覆寫并根據索引顯示內容，我正在嘗試使用useEffect鉤子來定位第一個索引并給它一個真實的值，但我不能將其設定為顯示第一個，而不是不斷顯示或完全破壞邏輯。

我的功能如下：

function KeyTeamMembers(props) {

    const [isVisible, setIsVisible] = useState(true);

    const toggle = i => {
        if (isVisible == i) {
            return setIsVisible(null)
        }

        setIsVisible(i)
    }

    useEffect((i) => {
         i === 0 ? setIsVisible(true) : setIsVisible(false)
    }, [])

    return (
        <KeyTeamMembersContainer>
            <Container width={14}>
                <Hello><span>2.4</span>Key Team Members</Hello>
                <FlexInline>
                    <HalfWidth>
                        <FlexWrap>
                            {props.team.map((person, i) => (
                                <>
                                    <TeamCardSmall key={slugify(person.firstName)} index={i}>
                                        <TeamCardContent onClick={() => toggle(i)}>
                                                <ThumbnailCover className={isVisible === i ? 'hide-cover' : 'cover' }>
                                                    <p>{person.firstName} {person.lastName}</p>
                                                </ThumbnailCover>
                                            <img src={person.image.fluid.src} alt="Test Images" className="card-item" />
                                        </TeamCardContent>
                                    </TeamCardSmall>
                                </>
                            ))}
                        </FlexWrap>
                    </HalfWidth>
                    <HalfWidth>
                        {props.team.map((person, i) => (
                            <>
                                <TeamCardInfo className={isVisible === i ? 'accordionContent show' : 'accordionContent' } key={slugify(person.lastName)} index={i}>
                                    <TeamCardBio>
                                        <h3>{person.firstName} {person.lastName}</h3>
                                        <BioRole>{person.role}</BioRole>
                                        <p>{person.bio.bio}</p>
                                    </TeamCardBio>
                                </TeamCardInfo>
                            </>
                        ))}
                    </HalfWidth>
                </FlexInline>
            </Container>
        </KeyTeamMembersContainer>
    );
}

uj5u.com熱心網友回復：

試試這個方法：

 function KeyTeamMembers(props) {

    const [isVisible, setIsVisible] = useState(null);

    const toggle = (i) => {
        if (isVisible == i)
            setIsVisible(null)
        else
            setIsVisible(i)
    }


    return (
        <KeyTeamMembersContainer>
            <Container width={14}>
                <Hello><span>2.4</span>Key Team Members</Hello>
                <FlexInline>
                    <HalfWidth>
                        <FlexWrap>
                            {props.team.map((person, i) => (
                                <>
                                    <TeamCardSmall key={slugify(person.firstName)} index={i}>
                                        <TeamCardContent onClick={() => toggle(i)}>
                                                <ThumbnailCover className={isVisible === i ? 'hide-cover' : 'cover' }>
                                                    <p>{person.firstName} {person.lastName}</p>
                                                </ThumbnailCover>
                                            <img src={person.image.fluid.src} alt="Test Images" className="card-item" />
                                        </TeamCardContent>
                                    </TeamCardSmall>
                                </>
                            ))}
                        </FlexWrap>
                    </HalfWidth>
                    <HalfWidth>
                        {props.team.map((person, i) => (
                            <>
                                <TeamCardInfo className={isVisible === i ? 'accordionContent show' : 'accordionContent' } key={slugify(person.lastName)} index={i}>
                                    <TeamCardBio>
                                        <h3>{person.firstName} {person.lastName}</h3>
                                        <BioRole>{person.role}</BioRole>
                                        <p>{person.bio.bio}</p>
                                    </TeamCardBio>
                                </TeamCardInfo>
                            </>
                        ))}
                    </HalfWidth>
                </FlexInline>
            </Container>
        </KeyTeamMembersContainer>
     );
}

標籤：javascript 反应

上一篇：如何在filter()中使用forEach()過濾陣列-Javascript

下一篇：畫布畫線不出現