如何通过单击组件上的图标来滚动和展开手风琴？

问题描述

我有一个组件MainContent及其子组件AddMock。 MainContent中有一个表，其中显示一些项目列表。它对每行都有一定的动作，例如视图和编辑，由Icon通过语义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的状态

const [activeKey,setActiveKey] = useState("");

此后，我们将ref用于我们的React-Bootstrap手风琴组件。以后我们需要使用Forwarded Refs来至少将ref分配给Accordion组件的最顶层DOM元素，以便我们可以滚动到它。

对于图标，请查看其onClick事件，这将activeKey设置为"0"，该事件与您的Accordion.Collapse组件的{{1} }。这将作为其“扩展”的触发点。

eventKey

对于滚动，我们可以使用https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView。此外，当然还有其他选择，例如scrollTo

最后，这是我们的手风琴组件在从父州获取的// 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")} /> 道具的转发引用和使用情况下的样子：

activeKey

CodeSandBox：https://codesandbox.io/s/react-semantic-ui-react-bootstrap-3ndyl?file=/src/App.js:2444-3230