javascript - 如何通过单击组件中的图标来滚动和展开手风琴?
问题描述
我有一个MainContent
带有子 Component 的组件AddMock
。有一个表格,MainContent
其中显示了一些项目列表。它对每一行都有特定的操作,例如视图和编辑,这些操作由图标通过语义 UI 反应呈现。通过单击每个图标,我需要向上滚动并展开手风琴。手风琴在AddMock
.
// AddMock.js
const AddMock = () => {
return (
<div className="row">
<Accordion style={{ paddingLeft: "32px" }}>
<Card className="collapseStyle">
<Card.Header>
<Accordion.Toggle as={Button} variant="link" eventKey="0">
Add Mock
</Accordion.Toggle>
</Card.Header>
<Accordion.Collapse eventKey="0">
<Card.Body>
<Container className="mockbody">
<Header as="h3">Hierarchy</Header>
<TabContent />
</Container>
</Card.Body>
</Accordion.Collapse>
</Card>
</Accordion>
</div>
);
};
下面是 MainContent.js
const MainContent = () => {
return (
<div>
<AddMock />
<div className="container-fluid">
<div className="row">
<div className="col-md-12">
<div className="card">
<div className="card-header card-header-info">
<h4 className="card-title ">MOCK</h4>
</div>
<div className="card-body">
<form>
{loading ? (
<div className="table-responsive">
<table className="table">
<thead>
<tr>
<th>AppName</th>
<th>Parent_App</th>
<th>Created_Date</th>
<th>Req_Path</th>
<th>Resp_Code</th>
<th>Resp_Content_Type</th>
<th>Resp_Delay</th>
<th>Action</th>
</tr>
</thead>
<tbody>
{data.map((routes, index) => {
return routes.map(contents, index);
})}
</tbody>
</table>
</div>
) : (
<Spinner
animation="border"
style={{ marginLeft: "620px" }}
/>
)}
</form>
</div>
</div>
</div>
</div>
</div>
</div>
);
};
是否可以使用 window.scrollTo() 或任何其他更好的方法来实现这一点?
解决方案
使用参考
首先,我们可以有一个状态来保持eventKey
活动 Accordion 的
const [activeKey, setActiveKey] = useState("");
之后,我们将 aref
用于我们的 React-Bootstrap Accordion 组件。稍后我们需要使用Forwarded Refs至少为 Accordion 组件的最顶层 DOM 元素分配一个 ref,以便我们可以滚动到它。
至于图标,看看它的onClick
事件,这只是设置与activeKey
组件的. 这将作为其“扩张”的触发点。"0"
Accordion.Collapse
eventKey
// we are going to need a ref to the Accordion element go get its position/use the scrollIntoView function
const accordElem = useRef(null);
const handleClickEdit = () => {
setActiveKey("0"); // "0" here is as defined in your Accordion.Collapse eventKey
accordElem.current.scrollIntoView({
behavior: "smooth",
block: "end",
inline: "nearest"
}); // initiate scroll to the "AddMock" Accordion component
};
return (
<div>
<AddMock
activeKey={activeKey}
setActiveKey={setActiveKey}
ref={accordElem}
/>
...
<Icon
name="pencil"
size="huge"
style={{ cursor: "pointer" }}
onClick={() => handleClickEdit("0")}
/>
对于滚动,我们可以使用https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView。此外,当然还有其他选择,例如scrollTo
activeKey
最后,这是我们的 Accordion 组件在转发 ref 和利用从父状态获取的 prop 时的样子:
const AddMock = React.forwardRef((props, ref) => {
// optional re-toggling of expanded accordion
function handleClickToggle(eventKey) {
if (eventKey === props.activeKey) {
props.setActiveKey("");
} else {
props.setActiveKey(eventKey);
}
}
return (
<div className="row" ref={ref}>
<Accordion style={{ paddingLeft: "32px" }} activeKey={props.activeKey}>
<Card className="collapseStyle">
<Card.Header>
<Accordion.Toggle
as={Button}
variant="link"
eventKey="0"
onClick={() => handleClickToggle("0")}
>
Add Mock
</Accordion.Toggle>
</Card.Header>
<Accordion.Collapse eventKey="0">
<Card.Body>
...
CodeSandBox:https ://codesandbox.io/s/react-semantic-ui-react-bootstrap-3ndyl?file=/src/App.js:2444-3230
推荐阅读
- r - 减小 R 中的栅格大小
- reactjs - 如何使用 firebase 中的两种“ref”方法?
- c - 为什么 fgets 不将 char 指针作为第一个参数?
- java - 如何使用 3 个 java 类从另一个类调用值
- flutter - 飞镖列表最大长度
- azure-devops - Azure DevOps:停止将工件部署到多阶段发布管道中的某些阶段
- javascript - Laravel 8-我可以在没有 JavaScript 的情况下将数据添加到表单输入中吗?
- tooltip - 使用 Bootstrap 5 在进度中添加工具提示
- javascript - 从firebase中删除文档的有效方法
- google-apps-script - 尝试调整此代码以自动从 Google 表格发送电子邮件