英文:
How to combine multiple states with onpress?
问题
这是你要翻译的部分：
"我有一个React Native应用程序。我想要切换两个图标（downcircle和upcircle）。但是onPress触发了一个useState。那么如何组合两个useState？因此，默认状态是图标向上。但是当再次触发onPress时，应该显示图标向下。
我尝试运行以下代码：
const { toggle, showAccordion } = useContext(ToggleContext);
const [toggleIcon, setToggleIcon] = useState(false);
const { accordionItems } = useContext(AccordionItemsContext);
const handleClick = () => {
setToggleIcon(!toggleIcon);
};
const handleSearch = (query) => {
setSearchAnimal(query);
};
<View>
{!item.hasOwnProperty("animals") && (
<ButtonDetail
onPress={() => {
toggle(item.id);
handleClick();
}}>
{toggleIcon ? (
<AntDesign name="downcircle" size={17} color="green" />
) : (
<AntDesign name="upcircle" size={17} color="green" />
)}
</ButtonDetail>
)}
</View>
ButtonDetail：
import { TouchableOpacity } from "react-native";
import styled from "styled-components/native";
export const ButtonDetail = styled(TouchableOpacity)`
position: absolute;
right: 25px;
width: 25px;
bottom: 10px;
`;
但是当我像上面那样做时，我收到以下错误：
TypeError: setToggleIcon is not a function. (In 'setToggleIcon(!toggleIcon)', 'setToggleIcon' is undefined)
问题：如何切换两个图标？"
请注意，我已经省略了代码中的HTML实体字符，并将代码片段改为JavaScript的语法以供更好的理解。
英文:
I have a react-native app. And I want to toggle two icons(downcircle and upcircle). But the onpress triggers already a usestate. So how to combine two use states? So the default state is the icon up. But when you trigger the onPress again the icon down has to be shown.
this code I try to run:
const { toggle, showAccordion } = useContext(ToggleContext);
const { toggleIcon, setToggleIcon } = useState(false);
const { accordionItems } = useContext(AccordionItemsContext);
const handleClick = () => {
setToggleIcon(!toggleIcon);
};
const handleSearch = (query) => {
setSearchAnimal(query);
};
<View>
{!item.hasOwnProperty("animals") && (
<ButtonDetail
onPress={() => {
toggle(item.id);
handleClick;
}}>
{toggleIcon ? (
<AntDesign name="downcircle" size={17} color="green" />
) : (
<AntDesign name="upcircle" size={17} color="green" />
)}
</ButtonDetail>
)}
</View>
ButtonDetail:
import { TouchableOpacity } from "react-native";
import styled from "styled-components/native";
export const ButtonDetail = styled(TouchableOpacity)`
position: absolute;
right: 25px;
width: 25px;
bottom: 10px;
`;
And when I do it like above. I get this error:
TypeError: setToggleIcon is not a function. (In 'setToggleIcon(!toggleIcon)', 'setToggleIcon' is undefined)
Question: how to toggle two icons?
答案1
得分: 1
错误信息说明了问题所在 - 传递给 onPress 的内容并非完全符合预期。要解决此错误，您需要通过以下方式重写代码：
//...
<ButtonDetail onPress={() => {
toggle(item.id);
handleClick();
}}>
//...
onPress 不应该（也不能）在其内部接受一个数组，它接受一个函数，您可以在其中描述在单击元素时会发生的所有行为。
英文:
The error text says what the problem is - not exactly what is expected is transmitted to onPress. To fix this error you need to fix the code by rewriting it as follows:
//...
<ButtonDetail onPress={() => {
toggle(item.id);
handleClick();
}}>
//...
onPress should not (and cannot) accept an array inside itself, it accepts a function in which you can describe all the behavior you need that will occur when you click on an element
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论