在 React && styled-components 中使用 State 从两个不同的按钮触发侧边栏

Question

The first button:

const [open, setOpen] = useState(false);
  return (
    <>
      <SideCart open={open} />
      <CartButton open={open} onClick={() => setOpen(!open)}>
      )
    </>

The sidebar:

const [hide, setHide] = useState(open ? true : true);
  return (
    <SidecartContainer open={open} hide={hide}>

       // Thats the second button 
       // I want to close the sidebar component with this button
      <ExitButton hide={hide} onClick={() => setHide(!hide)}>
    </SidecartContainer>

const SidecartContainer = styled.div`
  transform: ${({ open, hide }) =>
    open && hide ? "translateX(0)" : "translateX(100%)"};
`;

I have one button triggering the Open state of sidebar and when it opens I have an x button to close the sidebar.

It only works once.

What shall I use so whenever I click the open button to open and then when I click on close to hide?

It's made with styled-components.

Answer 1

I think your problem is that this line const [hide, setHide] = useState(open? true: true); only runs once on component mount. What you need is a useEffect in the sidebar to listen for changes to open and apply them to the hide state like so:

const [hide, setHide] = useState(open ? true : true);

useEffect(() => {
  setHide(!open);
}, [open]);

  return (
    <SidecartContainer open={open} hide={hide}>

--------Thats the second button 
--------I want to close the sidebar component with this button
      <ExitButton hide={hide} onClick={() => setHide(!hide)}>


    </SidecartContainer>

Answer 2

I finally found what's the right way to do it and it works.

First I declared outside of the sidebar the useStates logic:

  const [open, setOpen] = useState("");
  const hide = () => setOpen("translateX(100%)");
  const show = () => setOpen("translateX(0)");

then I passed the props to Sidecart.js:

const SideCart = (props) => {
  return (
    <SidecartContainer transform={props.transform} open={props.open}>
      <ExitButton open={props.open} onClick={props.onClick}>
        <CloseIcon />
      </ExitButton>
      <ProductCards>
        <CartProductCard />
      </ProductCards>
      <Total></Total>
    </SidecartContainer>
  );
};

also this is important, in the styled component css I declared the prop value:

const SidecartContainer = styled.div`
  transform: ${(props) => props.transform};
`;

Finally I changed the onClick functions accordingly:

  <SideCart transform={open} open={open} onClick={hide} />
  <CartButton open={open} onClick={show}>