ReactJS：使用反应钩子显示/隐藏具有不同 ID 的不同 div答案

【问题标题】：ReactJS: Show/Hide different divs with different IDs using react hooksReactJS：使用反应钩子显示/隐藏具有不同 ID 的不同 div
【发布时间】：2019-11-25 22:23:07
【问题描述】：

我的项目中有一个功能，我有不同的图标来显示 div。

到目前为止，这是我的代码：

  const [drawerOpen, setDrawerOpen] = useState(false);
    const [click, setClick] = useState(false);

    const contextData = {
        stateSetters: {
            setDrawerOpen
        }
    };

<Row>
<Col md={8}>
 <Card className="project-card">
   <div>
     <Icon type="down" onClick={() => {
    setClick(!click);
    contextData.stateSetters.setDrawerOpen(!click);
      }}/>
   </div>
  </Card>
 </Col>
<Col md={8}>
 <Card className="project-card">
   <div>
     <Icon type="down" onClick={() => {
    setClick(!click);
    contextData.stateSetters.setDrawerOpen(!click);
      }}/>
   </div>
  </Card>
 </Col>
<Col md={8}>
 <Card className="project-card">
   <div>
     <Icon type="down" onClick={() => {
    setClick(!click);
    contextData.stateSetters.setDrawerOpen(!click);
      }}/>
   </div>
  </Card>
 </Col>
</Row>

<div className={drawerOpen ? 'show-feature-drawer' : 'hide-feature-drawer'}>
   <div className="feature-drawer" id="data-1">

   </div>
</div>
<div className={drawerOpen ? 'show-feature-drawer' : 'hide-feature-drawer'}>
   <div className="feature-drawer" id="data-2">

   </div>
</div>
<div className={drawerOpen ? 'show-feature-drawer' : 'hide-feature-drawer'}>
   <div className="feature-drawer" id="data-3">

   </div>
</div>

我正在寻找如何通过调用其 div id 来打开的方法。我尝试调整 onClick() 但它仍然一次打开所有 div。

【问题讨论】：

标签： reactjs react-native frontend react-hooks

【解决方案1】：

需要指定要打开的抽屉的id，而不是state中的布尔值

const [drawerOpen, setDrawerOpen] = useState('');
const handleDrawerOpen = (data) => {
    if(data === drawerOpen) {
        setDrawerOpen('');
    } else {
        setDrawerOpen(data);
    }
}
    const contextData = {
        stateSetters: {
            setDrawerOpen: handleDrawerOpen
        }
    };

<Row>
<Col md={8}>
 <Card className="project-card">
   <div>
     <Icon type="down" onClick={() => {
        contextData.stateSetters.setDrawerOpen('data-1');
      }}/>
   </div>
  </Card>
 </Col>
<Col md={8}>
 <Card className="project-card">
   <div>
     <Icon type="down" onClick={() => {
         contextData.stateSetters.setDrawerOpen('data-2');
      }}/>
   </div>
  </Card>
 </Col>
<Col md={8}>
 <Card className="project-card">
   <div>
     <Icon type="down" onClick={() => {
          contextData.stateSetters.setDrawerOpen('data-3');
      }}/>
   </div>
  </Card>
 </Col>
</Row>

<div className={drawerOpen === 'data-1' ? 'show-feature-drawer' : 'hide-feature-drawer'}>
   <div className="feature-drawer" id="data-1">

   </div>
</div>
<div className={drawerOpen === 'data-2' ? 'show-feature-drawer' : 'hide-feature-drawer'}>
   <div className="feature-drawer" id="data-2">

   </div>
</div>
<div className={drawerOpen === 'data-3' ? 'show-feature-drawer' : 'hide-feature-drawer'}>
   <div className="feature-drawer" id="data-3">

   </div>
</div>

【讨论】：