How To Call Methods

Ionic Framework Ionic React
1

Hello,

I’m pretty new to React and only just starting out. I’ve tried to find the answer but not sure if I’m searching for the wrong phrase or keyword(s).

Using https://ionicframework.com/docs/api/slides as an example. I want to apply the lockSwipes method and only allow the user to continue by pressing on a button with an onClick.

However, I just cannot figure out how to call them.

I’m not expecting code to be written for me. Happy for you to point me in the right direction and ill go readup but spent the past two evenings attempting and so far failing and loosing hope.

Regards
Tom

2

You can use the useRef React hook to get a reference to the IonSlides component, and then invoke methods directly on the component.

Something like

const slidesRef = useRef();
const handleNext = () => slidesRef.current?.slideNext();
return (
  <>
    <IonSlides ref={slidesRef}>{/*...*/}</IonSlides>
    <IonButton onClick={handleNext}>Next</IonButton>
  </>
);
2 Likes
3

Hi mirkonassato,

Thank you for getting back to me. However, it is throwing the following error

TS2322: Type 'MutableRefObject<HTMLIonSlideElement | undefined>' is not assignable to type '((instance: HTMLIonSlidesElement | null) => void) | RefObject<HTMLIonSlidesElement> | null | undefined'. Type 'MutableRefObject<HTMLIonSlideElement | undefined>' is not assignable to type 'RefObject<HTMLIonSlidesElement>'. Types of property 'current' are incompatible. Type 'HTMLIonSlideElement | undefined' is not assignable to type 'HTMLIonSlidesElement | null'. Type 'undefined' is not assignable to type 'HTMLIonSlidesElement | null'.

4

Yeah with TypeScript you’ll have to add the right type argument. Try

const slidesRef = useRef<HTMLIonSlidesElement>(null);
2 Likes
5

Sorry for the late reply.
However, after a bit of trial and error following the information youve provided I’ve successfully achieved what I was looking to do.

Thank you very much.

6

Hi @DevRenshaw

As I’m facing the same problem, would you mind sharing your final solution? I used the solution from @mirkonasato and have the Error Invalid Hook Call etc…

Doing some trial and error here but if you see this and mind sharing it might be most helpful thanks.

7

Nevermind, I managed as well.

First I had my useRef outside of the React.FC function, then I used the following declaration seRef(document.createElement(‘ion-slides’));

This worked for me (in case someone in the future falls on this thread.

1 Like
8

For some reason when in react and typescript and useRef i could not get rid of the error Object is possible null, not even using several ifs to make sure the value would never be null.

I ended up getting the HTML element and applying the methods directly.

 const onNextSlide = () => {
    const htmlslides = document.querySelector('ion-slides');
    if (htmlslides) htmlslides.slideNext();
  };

  const onPrevSlide = () => {
    const htmlslides = document.querySelector('ion-slides');
    if (htmlslides) htmlslides.slidePrev();
  };

I can imagine this can bring a downside on performance but at least its working as expected.

9

This should work fine…

export const SlideContainer: React.FC = () => {
  const mySlide = useRef(null);

  const handleClick = async (_event: any) => {
    const swiper = await mySlide.current.getSwiper();
    swiper.slideNext();
  };

  return (
    <IonContent>
      <IonSlides options={slideOpts} ref={mySlide}>
        <IonSlide>ONE</IonSlide>
        <IonSlide>TWO</IonSlide>
        <IonSlide>THREE</IonSlide>
      </IonSlides>
      <IonButton onClick={handleClick}>next</IonButton>
    </IonContent>
  );
};
10

Sounds like you have strict null checks enabled. That’s fine, you can access any element ref safely like this:

const MyComponent = () => {
  const ref = useCallback((slidesRef) => {
    if (slidesRef) {
      // Can safely access the reference in here,
      // and call any methods on this ref, like slidesRef.getSwiper()
    }
  }, [])

  return (
    <IonSlides ref={ref} />
  )
}
1 Like
11

This worked perfectly, I have changed my code now to use useRef!. Thanks very much for the feedback

12

Sure thing! Check my last edit, I accidentally missed a few things when I was tweaking my code sample last and it was broken.

1 Like
13

@DevRenshaw The best way to call method is, via “ViewChild”. By using this you can inherit the “methods” for that particular component. (this is for Angular-Ionic)

import { Component, OnInit, ViewChild } from ‘@angular/core’;

@ViewChild(IonSlides) mySlide: IonSlides;

//Call this method from any events (click, keyup etc)
lockMySwipe(){
this.mySlide.lockSwipes(true);
}