创建了一个工作样本： https://codesandbox.io/s/collapse-gmqpp
问题是我有地图功能，所以有多个下拉菜单。所以我需要处理多个状态。每个下拉菜单一个。因此，我最终在可以打开的媒体对象上添加了一个属性。谢谢大家的投入。
我有一个非常奇怪的问题，希望当我刚接触REACT时有人可以提供帮助。我知道这是一大段代码，但是下面是问题的摘要。包裹在div中的DropDown标记之外的单击事件有效。但是，下拉列表中的点击事件不起作用吗？他们根本没有被解雇。
<div> THIS WORKS!
<DropdownItem
onClick={() => toggleCrawlResultModal("")}
>
Result
</DropdownItem>
<DropdownItem onClick={() => alert("dd")}>
Analytics
</DropdownItem>
<DropdownItem onClick={toggleAIModal}>
Insights
</DropdownItem>
<DropdownItem onClick={toggleDetails}>
Details
</DropdownItem>
</div>
CLICK EVENTS BELOW DOES NOT WORK
<Dropdown toggle={toggleMenu} isOpen={dropdownOpen}>
<DropdownToggle tag="div">
•••
</DropdownToggle>
<DropdownMenu>
<DropdownItem
onClick={() => toggleCrawlResultModal("")}
>
Result
</DropdownItem>
<DropdownItem onClick={() => alert("dd")}>
Analytics
</DropdownItem>
<DropdownItem onClick={toggleAIModal}>
Insights
</DropdownItem>
<DropdownItem onClick={toggleDetails}>
Details
</DropdownItem>
</DropdownMenu>
</Dropdown>
如果我将下拉菜单中的事件更改为使用箭头功能，则事件起作用。但是，然后它们会在页面加载时触发，而不是在单击切换按钮时触发：
<Dropdown toggle={() => toggleMenu()} isOpen={() => dropdownOpen()}>
更多测试： 如果我执行以下操作，则下拉列表始终会扩展：
<Dropdown isOpen={true}>
就像我这样做的方式一样，在dropdown元素内的子元素之间切换eat的所有事件。
我成功地在codeandbox上制作了一个非常糟糕的示例。单击三个点，然后单击结果按钮。它具有相同的行为：
https://codesandbox.io/s/collapse-gmqpp?fontsize=14&hidenavigation=1&theme=dark
完整代码：
import React, { useState, useEffect } from "react";
import DropdownPaging from "./DropdownPaging";
import TimeBar from "./TimeBar";
import { CrawlService } from "../../services/CrawlService";
import {
Card,
CardBody,
CardHeader,
Collapse,
Fade,
Row,
Col,
InputGroup,
InputGroupAddon,
Button,
Input,
DropdownItem,
DropdownMenu,
Dropdown,
DropdownToggle,
Modal,
ModalBody,
ModalHeader
} from "reactstrap";
const CrawlJobs = () => {
const [debug, setDebug] = useState(true);
const [timeout] = useState(300);
const [fadeIn] = useState(true);
const [dropdownOpen, setDropdownOpen] = useState(false);
const [showCrawlResultModal, setShowCrawlResultModal] = useState(false);
const [showAnalyticsModal, setShowAnalyticsModal] = useState(false);
const [showAIModal, setShowAIModal] = useState(false);
const [showDetailsModal, setShowDetailsModal] = useState(false);
const [mediaList, setMediaList] = useState([]);
const [tester, setTester] = useState(false);
const [pageInfo, setPageInfo] = useState({
minutes: 10,
pageIndex: 0,
pageSize: 10
});
useEffect(() => {
const fetchMediaData = async () => {
try {
var mediaResult = await CrawlService.getJobs();
setMediaList(mediaResult.data);
} catch (error) {}
};
fetchMediaData();
}, []);
const getMediaIcon = mediaName => {
switch (mediaName) {
case "Facebook":
return "fa fa-facebook-square fa-2x";
case "Youtube":
return "fa fa-youtube-square fa-2x";
case "Twitter":
return "fa fa-twitter-square fa-2x";
case "Instagram":
return "fa fa-instagram fa-2x";
default:
return null;
}
};
const pagerValueChanged = val => {
setPageInfo({
pageIndex: val.pageIndex,
pageSize: val.take,
minutes: pageInfo.minutes
});
setDebug(val.take + ", " + val.pageIndex);
};
const toggleDetails = e => {
setShowDetailsModal(!showDetailsModal);
};
const toggleAIModal = e => {
setShowAIModal(!showAIModal);
};
const toggleAnalyticsModal = e => {
setShowAnalyticsModal(!showAnalyticsModal);
};
const toggleCrawlResultModal = e => {
alert("fff");
setShowCrawlResultModal(!showCrawlResultModal);
};
const toggleMenu = e => {
setDropdownOpen(!dropdownOpen);
};
const test = () => {
alert(
"minutes:" +
pageInfo.minutes +
", pageIndex:" +
pageInfo.pageIndex +
", pageSize:" +
pageInfo.pageSize
);
};
const toggle = media => {
setMediaList(
mediaList.map(m => {
return m.typeId === media.typeId ? { ...m, toggle: !m.toggle } : m;
})
);
};
const loadJobsTable = media => {};
const minutesChanged = val => {
setPageInfo({ minutes: val });
};
return (
<div className="animated fadeIn">
<Row style={{ marginBottom: 10 }}>
<button onClick={test}>TEST</button>
<Col xs="6" sm="6" md="6">
<TimeBar onClick={minutesChanged}></TimeBar>
</Col>
</Row>
<Row>
<Col xs="4" sm="4" md="4">
<InputGroup>
<InputGroupAddon addonType="prepend">
<Button type="button" color="secondary">
<i className="fa fa-search"></i>
</Button>
</InputGroupAddon>
<Input
type="text"
id="input1-group2"
name="input1-group2"
placeholder="Tag or profile name"
/>
</InputGroup>
</Col>
</Row>
<h2>Profiles</h2>
{mediaList.map(media => (
<Row key={media.typeId}>
<Col xs="12" sm="12" md="12">
<Fade timeout={timeout} in={fadeIn}>
<Card>
<CardHeader style={{ padding: 0, borderBottomWidth: 0 }}>
<table
className="table table-borderless"
style={{ marginBottom: 0, padding: 0 }}
>
<tbody>
<tr>
<td className="align-middle" style={{ width: 50 }}>
<i className={getMediaIcon(media.name)}></i>
</td>
{media.statusList.map(status => (
<td key={"statusTD" + status.statusId}>
<button
className="btn btn-outline-dark btn-block"
onClick={() => toggle(media)}
>
{status.name} ({status.count})
</button>
</td>
))}
</tr>
</tbody>
</table>
</CardHeader>
<Collapse isOpen={media.toggle} id="collapseExample">
<CardBody>
<table className="table table-responsive-sm table-striped">
<thead>
<tr>
<th>Username</th>
<th>Date registered</th>
<th>Role</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>Yiorgos Avraamu</td>
<td>2012/01/01</td>
<td>Member</td>
<td style={{ width: 20, cursor: "pointer" }}>
<div>
<DropdownItem
onClick={() => toggleCrawlResultModal("")}
>
Result
</DropdownItem>
<DropdownItem onClick={() => alert("dd")}>
Analytics
</DropdownItem>
<DropdownItem onClick={toggleAIModal}>
Insights
</DropdownItem>
<DropdownItem onClick={toggleDetails}>
Details
</DropdownItem>
</div>
<Dropdown toggle={toggleMenu} isOpen={dropdownOpen}>
<DropdownToggle tag="div">
•••
</DropdownToggle>
<DropdownMenu>
<DropdownItem
onClick={() => toggleCrawlResultModal("")}
>
Result
</DropdownItem>
<DropdownItem onClick={() => alert("dd")}>
Analytics
</DropdownItem>
<DropdownItem onClick={toggleAIModal}>
Insights
</DropdownItem>
<DropdownItem onClick={toggleDetails}>
Details
</DropdownItem>
</DropdownMenu>
</Dropdown>
</td>
</tr>
<tr>
<td>Avram Tarasios</td>
<td>2012/02/01</td>
<td>Staff</td>
<td>•••</td>
</tr>
<tr>
<td>Quintin Ed</td>
<td>2012/02/01</td>
<td>Admin</td>
<td>•••</td>
</tr>
<tr>
<td>Enéas Kwadwo</td>
<td>2012/03/01</td>
<td>Member</td>
<td>•••</td>
</tr>
<tr>
<td>Agapetus Tadeáš</td>
<td>2012/01/21</td>
<td>Staff</td>
<td>•••</td>
</tr>
</tbody>
</table>
<div>
<p>{debug}</p>
<DropdownPaging
valueChanged={pagerValueChanged}
></DropdownPaging>
</div>
</CardBody>
</Collapse>
</Card>
</Fade>
</Col>
</Row>
))}
<h2>Tags</h2>
<div>
<Modal
isOpen={showCrawlResultModal}
toggle={toggleCrawlResultModal}
size="lg"
>
<ModalHeader toggle={toggleCrawlResultModal}>
Crawl Result
</ModalHeader>
<ModalBody>TBD</ModalBody>
</Modal>
<Modal isOpen={showAIModal} toggle={toggleAIModal} size="lg">
<ModalHeader toggle={toggleAIModal}>Insights</ModalHeader>
<ModalBody>TBD</ModalBody>
</Modal>
<Modal
isOpen={showAnalyticsModal}
toggle={toggleAnalyticsModal}
size="lg"
>
<ModalHeader toggle={toggleAnalyticsModal}>Analytics</ModalHeader>
<ModalBody>TBD</ModalBody>
</Modal>
<Modal isOpen={showDetailsModal} toggle={toggleDetails} size="lg">
<ModalHeader toggle={toggleDetails}>Details</ModalHeader>
<ModalBody>TBD</ModalBody>
</Modal>
</div>
</div>
);
};
export default CrawlJobs;