英文:
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") && (<ButtonDetailonPress={() => {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") && (<ButtonDetailonPress={() => {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
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论