Javascript 如何只允许一个活动的useState
我需要创建一个顺序逻辑。 我有一系列的联系人,我需要对他们进行排序。 因此,我创建了一个包含4个选项和4个useStates的模式,我想创建一个条件,如:Javascript 如何只允许一个活动的useState,javascript,reactjs,react-hooks,use-state,Javascript,Reactjs,React Hooks,Use State,我需要创建一个顺序逻辑。 我有一系列的联系人,我需要对他们进行排序。 因此,我创建了一个包含4个选项和4个useStates的模式,我想创建一个条件,如: contactsArr.sort(function (a, b) { if(isRecent === true){ return (a.lastMessage.sentAt > b.lastMessage.sentAt) ? -1 : ((a.lastMessage.sentAt < b.l
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);
}
...
}
contactsArr.sort(功能a、b){
如果(isRecent==真){
返回(a.lastMessage.sentAt>b.lastMessage.sentAt)?-1:((a.lastMessage.sentAta.lastMessage.sentAt)?-1:((b.lastMessage.sentAt
我的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;
import React,{useState}来自“React”;
从“/styles”导入{容器、覆盖、列、行、文本、按钮、包装、图标};
常量ModalOrder=({modalIsOpen,setModalIsOpen})=>{
//更改州名
const[isSelected1,setIsSelected1]=useState(false);
常量[isSelected2,setIsSelected2]=useState(false);
常量[isSelected3,setIsSelected3]=useState(false);
常量[isSelected4,setIsSelected4]=useState(false);
const[isSelected5,setIsSelected5]=useState(false);
返回(
setModalIsOpen(s=>!s)}>
{/*setModalIsOpen(s=>!s)}custom=“底部:0;位置:绝对;边距底部:320px;过渡:所有缓和度0.3s;“宽度=”90px“高度=”6px“背景=”#FFF9F9“半径=”100px“阴影=”0px 4px 4px rgba(0,0,0,0.1);“>*/}
setModalIsOpen(s=>!s)}/>
命令
setIsSelected1(s=>!s)}height=“32px”width=“100%”align=“center”justify=“start”>
利斯特
setIsSelected2(s=>!s)}height=“32px”width=“100%”align=“center”justify=“start”>
最老的
setIsSelected3(s=>!s)}height=“32px”width=“100%”align=“center”justify=“start”>
阅读
setIsSelected4(s=>!s)}height=“32px”width=“100%”align=“center”justify=“start”>
未读
);
};
导出默认ModalOrder;
我可以做什么来保持只有一个useState为true?(活动)
无需创建4个不同的常量,将所选的一个设置为TRUE,将其他设置为False
我的用户界面
只使用一个状态变量
const [indexSelected, setIndexSelected] = useState(-1);
setIndexSelected(indexSelected==1?-1:1)}borderT=“1px实心rgb(1961961961960.8)”borderB=“1px实心rgb(1961961961961960.8)”height=“32px”width=“100%”align=“center”justify=“start”>
其他按钮也遵循相同的模式。
< P>我认为,你应该考虑使用UpReReer-Hooverreact docs:您可以先创建一个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>
)
如果useState({type:false,order:false}),我可以这样做吗?目的是指示属性名而不是索引使用了什么?如果是这种情况,您可以在状态中使用字符串,如
setNameSelected(nameSelected=='type'?'''type')
是的,因为我必须识别每个按钮,以便稍后执行IF。因为它将在onClick上设置该选项,使useState更改类型/顺序,并以某种方式更改绿色可视条的flex/none显示。绿色变量显示在选项的左侧如果您在答案中使用index方法,则可以通过选中来识别按钮调整indexSelected
的数量。对于第一个按钮,您有indexSelected==1?“flex”:“无”
。对于第二个按钮,您有indexSelected==2?“flex”:“无”
,依此类推。fwiw是一个简单的示例(没有蓬松的内容)这里工作得很好,但有一种方法可以导出该内容?我需要在另一个页面中处理ifneedtodo if(options==“latest”){return…}。这实际上是另一个问题,这取决于您如何构建应用程序以找到最适合您的内容。您可以将状态向上移动到一个公共父级常量[selected,setSelected]=useState(null);
并作为道具(称为提升状态)传递给子组件。您还可以使用上下文API避免道具钻取,这样您就可以直接访问组件。是的,我已经这样做了,谢谢兄弟,我只需要看看我现在要做什么
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>
)
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;