Question

我在代码中使用2 useState。当第2个useSate状态为true时，我希望使第1个useState状态为false。请指导！！！

我可以使用类组件而不是通过功能组件来使父状态为假。

        const App = () => {
        const [visible, setVisible] = useState(false);
        const [hideAuto, setAuto]= useState(false);

        const parentDrawer = () => {
        setVisible(true);
        };

        const onClose = () => {
        setVisible(false);
        };

        const childDrawer=()=>{
        setAuto(true);
        }

        const Selection = () => {
        setAuto(false);
        };

return (
  <>
    <Button type="primary" onClick={()=>{parentDrawer()}}>
      Open drawer
    </Button>
    <Drawer
      title="Multi-level drawer"
      width={520}
      closable={false}
      onClose={onClose}
      visible={visible}
    >
      <Button type="primary" onClick={()=>{chilDrawer()}}>
        Two-level drawer
      </Button>
      <Drawer
        title="Two-level Drawer"
        width={320}
        closable={false}
        onClose={Selection}
        visible={hideAuto}
      >
        This is two-level drawer
      </Drawer>
    </Drawer>
  </>
);
}

 ReactDOM.render(<App />, document.getElementById('container'));

Answer 1

尝试一下：

const App = () => {
        const [isDrawerOneVisible, setDrawerOneVisibility] = useState(false);
        const [isDrawerTwoVisible, setDrawerTwoVisibility]= useState(false);

        const handleDrawerOneState = () => {
          setDrawerOneVisibility(!isDrawerOneVisible);
        };

        const handleDrawerTwoState = () => {
          setDrawerTwoVisibility(!isDrawerTwoVisible);
        };

return (
  <>
    <Button type="primary" onClick={handleDrawerOneState}>
      Open drawer
    </Button>
    <Drawer
      title="Multi-level drawer"
      width={520}
      closable={false}
      onClose={handleDrawerOneState}
      visible={isDrawerOneVisible}
    >
      <Button type="primary" onClick={handleDrawerTwoState}>
        Two-level drawer
      </Button>
      <Drawer
        title="Two-level Drawer"
        width={320}
        closable={false}
        onClose={handleDrawerTwoState}
        visible={isDrawerTwoVisible}
      >
        This is two-level drawer
      </Drawer>
    </Drawer>
  </>
);
}

 ReactDOM.render(<App />, document.getElementById('container'));

Answer 2

也许我想念您的问题，但只是为了验证一下，您是否尝试过：

     const childDrawer=()=>{
     setAuto(true);
     setVisible(false);***
     }

当子状态为true时如何将父状态设置为false

2 个答案: