React typescript can't get value from ref object

Question

I have got a react typescript project and have problems with login form.
Here's react login form code.

login-form.tsx

import * as React from 'react';
import {
    Button,
    FormGroup,
    Input,
    Label
} from 'reactstrap';
import {observer} from 'mobx-react';

@observer
export class LoginForm extends React.Component {
    form: any;
    username: any;
    password: any;
    OnLogin (){
      console.log("username:",this.username);
      console.log("username value:",this.username.value);
    }
    render(){
        return (
            <form className="form" ref={(form:any)=>{this.form = form}}>
                <FormGroup>
                    <Label>Sign In</Label>
                    <Input type="text" name="username" ref={(username:any)=>{this.username = username}} id="username" placeholder="enter your username"/>
                    <Input type="password" name="password" ref={(password:any)=>{this.password = password}} id="password" placeholder="enter your password"/>
                    <Button color="primary" onClick={this.OnLogin.bind(this)}>{"Login"}</Button>{' '}
                </FormGroup>
            </form>
        )
    }
}

Here, when I type my username artgb and click on Login button, OnLogin function print this line

username: Object { props: Object, context: Object, refs: Object, updater: Object, _reactInternalFiber: Object, _reactInternalInstance: Object, state: null }

username value:undefined

I thought that username value should be artgb not undefined.

In fact I have just started typescript and can miss something basic.
Any kind of suggestion will be appreciate.

You don't need to use refs for basic forms (and it constantly baffles me how people keep coming to the conclusion they do!) - please read the 'Forms' page in the docs for examples of the way you should do it. Refs are explicitly referred to as an escape hatch that shouldn't be overused. — Joe Clay
– Joe Clay, Commented Nov 1, 2017 at 16:44

ChrisR · Accepted Answer · 2017-11-01 17:40:12Z

1

The value returned by the ref is a react component. So not a DOM element, for which you need to use ReactDOM.findDOMNode(this.username). This will return the DOM element, on which you can access the value property.

But as stated by Joe Clay, you do not need the refs. Use the event as described in the links he provided.

edited Nov 1, 2017 at 17:40

answered Nov 1, 2017 at 16:53

ChrisR

3,9981 gold badge18 silver badges24 bronze badges

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

4 Comments

Joe Clay Over a year ago

According to the Reactstrap docs, in this case you can also access the innerRef prop on the React component to get the DOM element - might be a little more efficient, potentially.

ChrisR Over a year ago

Even better ! Not familiar with reactstrap, so I would not have know. :)

artgb Over a year ago

I got ReactDOM.findDOMNode(username) as input and console.log(ReactDOM.findDOMNode(username).nodeValue ) shows null

ChrisR Over a year ago

Replace nodeValue by value as you did before. Why do you use nodeValue?

artgb · Accepted Answer · 2017-11-06 17:20:14Z

0

I found easy solution.

OnLogin (){
  let formData: any = new FormData(form);
  console.log(formData.fd.get('upload_for'));
  console.log("username:",formData.fd.get('username'));
}

answered Nov 6, 2017 at 17:20

artgb

3,2716 gold badges21 silver badges40 bronze badges

Collectives™ on Stack Overflow

React typescript can't get value from ref object

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related