How to get password field value in react's material-ui

Question

I am not able to access the value of <TextField />, if i don't write <input type='password'/> then it works fine, but for this i am getting a TypeError, 'this.refs[this._getRef(...)].getInputNode is not a function'.

 dialogAction(tag,e){ console.log(this.refs.password); console.log(this.refs.password.getValue()); this.refs.dialog.dismiss(); } render(){ let self = this; let row = this.row,col = this.column; let standardActions = [ { text: 'Cancel',onTouchTap: this.dialogAction.bind(this,ProductConstants.CANCEL)}, { text: 'Submit',onTouchTap: this.dialogAction.bind(this,ProductConstants.SUBMIT)} ]; return ( <div className="ProductRepository"> <Dialog ref = 'dialog' title="Dialog With Standard Actions" actions={standardActions} actionFocus="submit" modal={true}> <TextField ref='password' hintText="Password" floatingLabelText="Password"> <input type="password" /> </TextField> </Dialog> </div> );} }

image below is the console output of the above code.

console output

Vikramaditya · Accepted Answer · 2018-03-27 08:20:54Z

This solved my issue:

<TextField ref='password' hintText="Password" floatingLabelText="Password" type="password"> </TextField>

After that

 this.refs.password.getValue()

gives the desired output.

For React v >= 15.6

<TextField ref={x => this.password = x} hintText="Password" floatingLabelText="Password" type="password"> </TextField>

in inputHandler function

this.password.value

Kushal Jain · Accepted Answer · 2017-11-16 12:10:59Z

19

For material 1.0 and react 16.1.1

Use inputRef

 <TextField autoFocus={true} inputRef={el => this.fv = el} placeholder="Required" size="30"></TextField >

To read the value use below line

console.log(this.fv.value);

answered Nov 16, 2017 at 12:10

Kushal Jain

3,1966 gold badges36 silver badges49 bronze badges

3 Comments

Harsh Phoujdar Over a year ago

Cannot find fv, using hooks

Kushal Jain Over a year ago

How you using hooks here ?

Kushal Jain Over a year ago

I suggest better to use onChange event rather follow this approach. As React says use onChange event to get values

jalooc · Accepted Answer · 2015-07-16 09:40:25Z

Assign ref="password" to the input itself instead of the TextField. Currently you are executing getValue() on some abstract (probably some container) tag (TextField), not on the input itself.

Here's how it's done.

Chtioui Malek · Accepted Answer · 2017-08-15 15:39:48Z

0

You can get the input value like this :

this.refs.password.input.value;

answered Aug 15, 2017 at 15:39

Chtioui Malek

11.5k1 gold badge76 silver badges70 bronze badges

Collectives™ on Stack Overflow

How to get password field value in react's material-ui

4 Answers 4

Comments

3 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

Comments

Comments

Linked

Related