我如何在React中单独打开下拉菜单?

Question

我有一个列表，我在这个列表中有下拉列表。但是因为它们的状态是相同的，所以单击下拉菜单会打开其他的。这个单独打开的方法是什么?我们可能会使用id，但我还没弄清楚具体怎么做。顺便说一下，项目中使用了reactstrap，所以我尝试使用reactstrap。

const toggleModal1 = () => setModal1(!modal1);
<Table className="no-wrap v-middle" responsive>
<thead>
<tr className="border-0">
<th className="border-0">Ünvan</th>
<th className="border-0">TCK/Vergi No</th>
<th className="border-0">E-Posta</th>
<th className="border-0">Ad</th>
<th className="border-0">Soyad</th>
<th className="border-0">İşlemler</th>
</tr>
</thead>
<tbody>
{companies?.map((val) => (
<tr key={val.Id}>
<td>
<span>{val.Name}</span>
</td>
<td>
<span>{val.TCKN_VN}</span>
</td>
<td>
<span>{val.ElectronicMail}</span>
</td>
<td>
<span>{val.FirstName}</span>
</td>
<td>
<span>{val.FamilyName}</span>
</td>
<td>
<Dropdown
toggle={(e) => handleDropdownToggle(e,val.Id)}
direction="left"
id={val.Id}
>
<DropdownToggle caret>
<i className="fas fa-cogs"></i>
</DropdownToggle>
<DropdownMenu>
<DropdownItem onClick={toggleModal1}>
Şirket Düzenle
</DropdownItem>
<DropdownItem onClick={(e) => removeCompany(e, val.Id)}>
Şirket Sil
</DropdownItem>
</DropdownMenu>
</Dropdown>
</td>
</tr>
))}
</tbody>
</Table>
<Modal isOpen={modal1} toggle={toggleModal1}>
<ModalHeader toggle={toggleModal1}>Modal title</ModalHeader>
<ModalBody>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</ModalBody>
<ModalFooter>
<Button color="primary" onClick={toggleModal1}>
Do Something
</Button>{" "}
<Button color="secondary" onClick={toggleModal1}>
Cancel
</Button>
</ModalFooter>
</Modal>

Answer 1

所以我找到了答案，在ReactStrap中有一个名为UncontrolledDropdown的标签。所以你可以这样做:

<UncontrolledDropdown>
<DropdownToggle caret>
Dropdown
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>