离子反应，滚动到特定的列表项

【问题标题】：ionic react, scroll to specific list item离子反应，滚动到特定的列表项
【发布时间】：2020-07-27 04:58:06
【问题描述】：

Ionic Scroll To Specific List Item 是关于 Ionic + Angular 的。答案是 AngularJS 特有的。

我想问同样的问题，但具体到 Ionic + React：

这样的布局：

<IonContent>
  <IonList>
    <IonItem key={1}>1</IonItem>
    <IonItem key={2}>2</IonItem>
    <IonItem key={3}>3</IonItem>
    <IonItem key={4}>4</IonItem>
    <IonItem key={5}>5</IonItem>
  </IonList>
</IonContent>

如何滚动到特定的列表项？

【问题讨论】：

标签： javascript reactjs typescript ionic-framework

【解决方案1】：

const App = () => {
  const [text, setText] = useState("");

  const gotoButton = () => {
    let y = document.getElementById("row-" + text).offsetTop;
    console.log(y);
    let content = document.querySelector("ion-content");
    content.scrollToPoint(0, y);
  };

  return (
    <IonApp>
      <IonHeader>
        <IonToolbar>
          <IonButton onClick={() => gotoButton()}>GOTO ROW</IonButton>
          <IonInput
            value={text}
            placeholder="Enter Row Number"
            onIonChange={e => setText(e.detail.value)}
          />
        </IonToolbar>
      </IonHeader>
      <IonContent
        className="ion-padding"
        scrollEvents={true}
        onIonScrollStart={_e => {
          console.log(_e);
        }}
        onIonScroll={() => {}}
        onIonScrollEnd={() => {}}
      >
        {/* <!-- LIST --> */}
        <IonList>
          {Array(200)
            .fill()
            .map((v, index) => {
              return (
                <IonItem id={"row-" + index} key={index}>
                  {index + ""}
                </IonItem>
              );
            })}
        </IonList>
        <button id="btn" />
      </IonContent>
    </IonApp>
  );
};

export default App;

【讨论】：