如何在 react 的 material-ui 中获取密码字段值

IT技术 javascript reactjs material-ui
2021-04-22 05:27:15

我无法访问的值<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> 
    );}

   }

下图是上述代码的控制台输出。

控制台输出

4个回答

这解决了我的问题：

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

在那之后

 this.refs.password.getValue()

给出所需的输出。

对于 React v >= 15.6

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

在 inputHandler 函数中

this.password.value

对于材料 1.0 和react 16.1.1

使用输入引用

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

要阅读下面的值使用

console.log(this.fv.value);
我建议最好使用 onChange 事件而不是遵循这种方法。正如 React 所说，使用 onChange 事件来获取值
2021-05-28 05:27:15
你在这里如何使用钩子？
2021-06-05 05:27:15
使用钩子找不到 fv
2021-06-11 05:27:15

分配ref="password"给输入本身而不是TextField. 当前，您正在getValue()某个抽象（可能是某个容器）标签 ( TextField) 上执行，而不是在其input本身上执行。

这是它的完成方式。

您可以像这样获取输入值：

this.refs.password.input.value;
其它你可能感兴趣的问题
上一篇从选择中获取value——react 下一篇@material-ui 与 material-ui 的区别（不带 at 符号）