how to declare a react ref in props function when using typescript

Question

I need to pass the refs from one component to a function passed in from another component as a prop, and I need to do it in typescript.

So the relevant code inside the child component is

class Login extends Component<IProps, IState>  {
    private emailRef = React.createRef<HTMLInputElement>();
    private passRef = React.createRef<HTMLInputElement>();

    constructor(props?) {
        super(props);
    }

    login = () => {
        const email = this.emailRef.current;
        const pass = this.passRef.current;
        this.props.login(email, pass);
    }

which is ok, but now inside of my IProps I should declare login.

And I can't figure out how to do it?

As an example

    interface IProps {
      login: (u: any, p: any) => any,
      errorMessage: ''
    }

obviously those anys are no good, and need to be replaced with something better. How do I specify that I am in fact going to be passing a react ref here?

ok - I thought the ref was a wrapping type that gave me some other properties, although I have to admit I didn't have any particular reason for that supposition. — user254694
– user254694, Commented May 13, 2019 at 13:47
oh of course I'd forgotten that "When the ref attribute is used on an HTML element, the ref created in the constructor with React.createRef() receives the underlying DOM element as its current property." reactjs.org/docs/refs-and-the-dom.html — user254694
– user254694, Commented May 13, 2019 at 17:21

Engineer · Accepted Answer · 2019-05-13 13:33:38Z

0

Declare in constructor() as,

 constructor(props?) {
        super(props);
        this.emailRef = React.createRef();
        this.passRef = React.createRef();
    }

answered May 13, 2019 at 13:33

Engineer

1,26111 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Amir-Mousavi Over a year ago

Why? what is the necessity to define refs in the constructor? thought the question is not what you have answered

Amir-Mousavi Over a year ago

Yes correct, never used ref in class, always using in FC, but technically both work :)

user254694 Over a year ago

in typescript using this.emailRef inside the constructor gives me error S2339: Property 'emailRef' does not exist on type 'THE COMPONENT TYPE'

Collectives™ on Stack Overflow

how to declare a react ref in props function when using typescript

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related