javascript 如何在 react 的 material-ui 中获取密码字段值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31446751/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get password field value in react's material-ui
提问by Vikramaditya
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'.
我无法访问的值<TextField />，如果我不写，<input type='password'/>那么它工作正常，但为此我得到了一个 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.
下图是上述代码的控制台输出。
回答by Kushal Jain
For material 1.0 and react 16.1.1
对于材料 1.0 和反应 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);
回答by Vikramaditya
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
对于 React v >= 15.6
<TextField ref={x => this.password = x}
hintText="Password"
floatingLabelText="Password"
type="password">
</TextField>
in inputHandler function
在 inputHandler 函数中
this.password.value
回答by jalooc
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 inputitself.
分配ref="password"给输入本身而不是TextField. 当前，您正在getValue()某个抽象（可能是某个容器）标签 ( TextField) 上执行，而不是在其input本身上执行。
Here's how it's done.
这是它的完成方式。
回答by Chtiwi Malek
You can get the input value like this :
您可以像这样获取输入值：
this.refs.password.input.value;
this.refs.password.input.value;
