当我第二次点击 ReactJS 时，我的下拉菜单不起作用

Question

如果我按下一个按钮，我需要我的下拉按钮来显示下面的文本，另一个按钮用于隐藏。我尝试使用useState方法，但它也不起作用，非useState方法也是如此。这是我的代码，希望有人能解决这个问题，谢谢

function AnnouncementCard(props) {
const { announcement } = props;

const triangleDown = <img src={DropDown} alt="No-img" />;
const triangleUp = <img src={DropDownActive} alt="No-img" />;

function Readmore() {
console.log("inject", currentTriangle);
if (currentTriangle == triangleDown) {
DisplayText(null);
ChangeTriangle(triangleUp);
console.log(2, currentTriangle);
} else if (currentTriangle == triangleUp) {
DisplayText(<Text>{announcement.detail}</Text>);
ChangeTriangle(triangleDown);
console.log(1, currentTriangle);
}
}

const [currentTriangle, ChangeTriangle] = useState(triangleUp);
const [currentText, DisplayText] = useState(null);

return (
<Card>
<CardBody>
<PictureBox>
<Picture src={announcement.img} alt="no-img" />
</PictureBox>
<TextBox>
<Title>{announcement.title}</Title>
<Date>{announcement.date}</Date>
<ReadMore onClick={() => {Readmore();}}>
Read more
<Triangle>{currentTriangle}</Triangle>
</ReadMore>
</TextBox>
</CardBody>
<Textarea>{currentText}</Textarea>
</Card>
);
}

export default AnnouncementCard;

Answer 1

不能简单地使用==运算符(currentTriangle == triangleDown(比较JSX元素。为了简单起见，我会使用布尔值，而不是将元素保存在状态中，并且根据情况可以显示向上和向下按钮。

1. 用以下内容替换ChangeTriangle状态挂钩

const [toggleValue, setToggleValue] = useState(true);

2. 如下更新ReadMore函数

function Readmore() {
if (toggleValue === false) {
DisplayText(null);
setToggleValue(true);
} else if (toggleValue === true) {
DisplayText(<Text>{announcement.detail}</Text>);
setToggleValue(false);
}
}

3. 使用三元运算符设置三角形按钮，如下所示

<Triangle>{toggleValue ? triangleUp : triangleDown}</Triangle>