ReactJS：Show/Hide 使用反应挂钩的具有不同 ID 的不同 div

Question

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

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

  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() 但它仍然一次打开所有 divs。

Answer 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>

ReactJS：Show/Hide 使用反应挂钩的具有不同 ID 的不同 div

ReactJS: Show/Hide different divs with different IDs using react hooks

frontend

reactjs

react-native

react-hooks