![](/img/trans.png)
[英]In Angular 9 how to allow only one toggle in div to be active at a given time?
[英]How to allow only one active useState
我需要创建一个订单逻辑。 我有一系列联系人,我需要对他们进行排序。 所以我创建了一个带有 4 个选项和 4 个 useStates 的模式,我想创建一个条件,例如:
contactsArr.sort(function (a, b) {
if(isRecent === true){
return (a.lastMessage.sentAt > b.lastMessage.sentAt) ? -1 : ((a.lastMessage.sentAt < b.lastMessage.sentAt) ? 1 : 0);
}
if(isOld === true){
return (b.lastMessage.sentAt > a.lastMessage.sentAt) ? -1 : ((b.lastMessage.sentAt < a.lastMessage.sentAt) ? 1 : 0);
}
...
}
我的 orderModal 组件:
import React, { useState } from 'react';
import { Container, Overlay, Column, Row, Text, Button, Wrapper, Icon } from './styles';
const ModalOrder = ({modalIsOpen, setModalIsOpen}) => {
//change states names
const [isSelected1, setIsSelected1] = useState(false);
const [isSelected2, setIsSelected2] = useState(false);
const [isSelected3, setIsSelected3] = useState(false);
const [isSelected4, setIsSelected4] = useState(false);
const [isSelected5, setIsSelected5] = useState(false);
return (
<>
<Overlay display={modalIsOpen ? "flex" : "none"} onClick={() => setModalIsOpen(s => !s)} >
</Overlay>
<Wrapper height={modalIsOpen} shadow="0px -4px 4px rgba(0, 0, 0, 0.1);" display={"flex"} margin="10px 0 0 0" align="center" justify="center" zIndex="2011">
{/* <Row transform={modalIsOpen ? "translateY(0)" : "translateY(327px)"} cursor="pointer" onClick={() => setModalIsOpen(s => !s)} custom="bottom: 0; position: absolute; margin-bottom: 320px; transition: all ease 0.3s;" width="90px" height="6px" background="#FFF9F9" radius="100px" shadow="0px 4px 4px rgba(0, 0, 0, 0.1);"></Row> */}
<Icon custom="bottom: 0; position: absolute; margin-bottom: 310px; transition: all ease 0.3s;" transform={modalIsOpen ? "translateY(0)" : "translateY(360px)!important"} onClick={() => setModalIsOpen(s => !s)}/>
<Column transform={modalIsOpen ? "translateY(0)" : "translateY(309px)"} align="center" custom="bottom: 0; position: absolute; border-top-left-radius: 35px; border-top-right-radius: 35px; transition: all ease 0.3s;" width="100%" height="308px" background="#FFF" position="absolute">
<Text margin="16px 0 12px 0" font="bold 16px/21px Segoe UI Regular" color="#448757" >Order</Text>
<Button borderT="1px solid rgb(196, 196, 196, 0.8)" borderB="1px solid rgb(196, 196, 196, 0.8)" onClick={() => setIsSelected1(s => !s)} height="32px" width="100%" align="center" justify="start">
<Row shadow="2px 0px 4px rgba(0, 0, 0, 0.1);" display={isSelected1 ? "flex" : "none"} custom="border-bottom-right-radius: 5px; border-top-right-radius: 5px; position: absolute; left: 0;" width="10px" height="32px" background="#448757" />
<Text margin="0 0 0 20px" font="normal 14px/19px Segoe UI Regular" color="#525252" >Leatest</Text>
</Button>
<Button borderB="1px solid rgb(196, 196, 196, 0.8)" onClick={() => setIsSelected2(s => !s)} height="32px" width="100%" align="center" justify="start">
<Row shadow="2px 0px 4px rgba(0, 0, 0, 0.1);" display={isSelected2 ? "flex" : "none"} custom="border-bottom-right-radius: 5px; border-top-right-radius: 5px; position: absolute; left: 0;" width="10px" height="32px" background="#448757" />
<Text margin="0 0 0 20px" font="normal 14px/19px Segoe UI Regular" color="#525252" >Oldest</Text>
</Button>
<Button borderB="1px solid rgb(196, 196, 196, 0.8)" onClick={() => setIsSelected3(s => !s)} height="32px" width="100%" align="center" justify="start">
<Row shadow="2px 0px 4px rgba(0, 0, 0, 0.1);" display={isSelected3 ? "flex" : "none"} custom="border-bottom-right-radius: 5px; border-top-right-radius: 5px; position: absolute; left: 0;" width="10px" height="32px" background="#448757" />
<Text margin="0 0 0 20px" font="normal 14px/19px Segoe UI Regular" color="#525252" >Read</Text>
</Button>
<Button borderB="1px solid rgb(196, 196, 196, 0.8)" onClick={() => setIsSelected4(s => !s)} height="32px" width="100%" align="center" justify="start">
<Row shadow="2px 0px 4px rgba(0, 0, 0, 0.1);" display={isSelected4 ? "flex" : "none"} custom="border-bottom-right-radius: 5px; border-top-right-radius: 5px; position: absolute; left: 0;" width="10px" height="32px" background="#448757" />
<Text margin="0 0 0 20px" font="normal 14px/19px Segoe UI Regular" color="#525252" >Unread</Text>
</Button>
</Column>
</Wrapper>
</>
);
};
export default ModalOrder;
我能做些什么来保持只有一个 useState 为真? (活动)无需创建 4 个不同的 const 将所选的一个设置为 TRUE,其他设置为 False
我的用户界面
只使用一个 state 变量。
const [indexSelected, setIndexSelected] = useState(-1);
<Button onClick={() => setIndexSelected(indexSelected === 1 ? -1 : 1)} borderT="1px solid rgb(196, 196, 196, 0.8)" borderB="1px solid rgb(196, 196, 196, 0.8)" height="32px" width="100%" align="center" justify="start">
<Row display={indexSelected === 1 ? "flex" : "none"} shadow="2px 0px 4px rgba(0, 0, 0, 0.1);" custom="border-bottom-right-radius: 5px; border-top-right-radius: 5px; position: absolute; left: 0;" width="10px" height="32px" background="#448757" />
对按钮的 rest 也遵循相同的模式。
您可以先创建一个 CustomButton 组件以保持代码干爽:
const CustomButton = ({selected, setSelected, children}) => (
<Button borderT="1px solid rgb(196, 196, 196, 0.8)" borderB="1px solid rgb(196, 196, 196, 0.8)" onClick={setSelected} height="32px" width="100%" align="center" justify="start">
<Row shadow="2px 0px 4px rgba(0, 0, 0, 0.1);" display={selected ? "flex" : "none"} custom="border-bottom-right-radius: 5px; border-top-right-radius: 5px; position: absolute; left: 0;" width="10px" height="32px" background="#448757" />
<Text margin="0 0 0 20px" font="normal 14px/19px Segoe UI Regular" color="#525252" >{children}</Text>
</Button>
)
然后创建一个具有初始值 null 的 state。 创建一个buttons
变量及其内容。 对于此示例,您可以使用内容来设置您selected
的 state 并进行比较(因为它们都是唯一的),但通常最好有一个唯一的密钥。
然后你遍历你的buttons
,你传递selected
和setSelected
如下所示:
const ModalOrder = ({modalIsOpen, setModalIsOpen}) => {
//change states names
const [selected, setSelected] = useState(null);
const buttons = ['Leatest', 'Oldest', 'Read', 'Unread'];
return (
<>
<Overlay display={modalIsOpen ? "flex" : "none"} onClick={() => setModalIsOpen(s => !s)} >
</Overlay>
<Wrapper height={modalIsOpen} shadow="0px -4px 4px rgba(0, 0, 0, 0.1);" display={"flex"} margin="10px 0 0 0" align="center" justify="center" zIndex="2011">
{/* <Row transform={modalIsOpen ? "translateY(0)" : "translateY(327px)"} cursor="pointer" onClick={() => setModalIsOpen(s => !s)} custom="bottom: 0; position: absolute; margin-bottom: 320px; transition: all ease 0.3s;" width="90px" height="6px" background="#FFF9F9" radius="100px" shadow="0px 4px 4px rgba(0, 0, 0, 0.1);"></Row> */}
<Icon custom="bottom: 0; position: absolute; margin-bottom: 310px; transition: all ease 0.3s;" transform={modalIsOpen ? "translateY(0)" : "translateY(360px)!important"} onClick={() => setModalIsOpen(s => !s)}/>
<Column transform={modalIsOpen ? "translateY(0)" : "translateY(309px)"} align="center" custom="bottom: 0; position: absolute; border-top-left-radius: 35px; border-top-right-radius: 35px; transition: all ease 0.3s;" width="100%" height="308px" background="#FFF" position="absolute">
<Text margin="16px 0 12px 0" font="bold 16px/21px Segoe UI Regular" color="#448757" >Order</Text>
{
buttons.map(content => (
<CustomButton key={content}
selected={selected === content}
setSelected={() => setSelected(content)}>{content}
</CustomButton>
))
}
</Column>
</Wrapper>
</>
);
};
export default ModalOrder;
在我看来,你应该考虑使用 useReducer Hook
反应文档: https://reactjs.org/docs/hooks-reference.html#usereducer
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.