同一页面中的多抽屉 reactJs 不工作

Question

我是ReactJs实习生，如何在同一个页面使用多抽屉reactJs
编码我的 App.js 文件

    App = () =>{
    const [visible, setVisible] = useState(false);
    const showDrawer = () => {
        setVisible(true);
    };
    const onClose = () => {
        setVisible(false);
    };
    return(
    // drawer 1
    <Button type="primary" className="btn-submit" onClick={this.showDrawer}>submit drawer 1</Button>
     <Drawer className="modal-form"onClose={onClose} visible={visible}>
         content
    </Drawer>
    // drawer 2
    <Button type="primary" className="btn-submit" onClick={this.showDrawer}>submit drawer 2</Button>
    <Drawer className="modal-form"onClose={onClose} visible={visible}>
         content
    </Drawer>
    )
   }

如何点击按钮标签显示相应的抽屉！请！帮帮我。

Answer 1

如果这些抽屉包含不同的内容，那么您将不得不为每个抽屉管理两个状态变量以控制抽屉的可见性。

App = () =>{
    const [visibleDrawer1, setVisibleDrawer1] = useState(false);
    const [visibleDrawer2, setVisibleDrawer2] = useState(false);
    const showDrawer1 = () => {
        setVisibleDrawer1(true);
    };
    const onCloseDrawer1 = () => {
        setVisibleDrawer1(false);
    };
    const showDrawer2 = () => {
        setVisibleDrawer2(true);
    };
    const onCloseDrawer2 = () => {
        setVisibleDrawer2(false);
    };
    return(
    // drawer 1
    <Button type="primary" className="btn-submit" 
      onClick={this.showDrawer1}>submit drawer 1</Button>
     <Drawer className="modal-form"onClose={onCloseDrawer1} 
      visible={visibleDrawer1}>
         content
    </Drawer>
    // drawer 2
    <Button type="primary" className="btn-submit" 
     onClick={this.showDrawer2}>submit drawer 2</Button>
    <Drawer className="modal-form"onClose={onCloseDrawer2} 
       visible={visibleDrawer2}>
         content
    </Drawer>
    )
   }

同一页面中的多抽屉 reactJs 不工作

multiple-drawer reactJs in same page not working

javascript

reactjs

antd

drawer