javascript - 如何只允许一个事件的 useState

Question

我需要创建一个订单逻辑。
我有一系列联系人，我需要订购它们。
所以我创建了一个带有 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 为 true？ (积极的)
无需创建 4 个不同的常量，将所选的一个设置为 TRUE，其他设置为 False
我的用户界面

Answer 1

您可以先创建一个 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 的状态。创建一个 buttons变量，及其内容。对于此示例，您可以使用内容来设置您的 selected状态和比较(因为所有都是唯一的)，但通常最好有一个唯一的键。
然后你循环你的 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;