如何在 react 的 material-ui 中獲取密碼字段值

Question

我無法訪問<TextField />的值，如果我不寫<input type='password'/>那么它工作正常，但為此我得到一個 TypeError，' this.refs[this. _getRef(...)].getInputNode 不是函數'。

 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> 
    );}

   }

下圖是上述代碼的控制台輸出。

Answer 1

這解決了我的問題：

<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

Answer 2

對於材料 1.0 和反應 16.1.1

使用輸入引用

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

要讀取下面的值使用

console.log(this.fv.value);

Answer 3

將ref="password"分配給輸入本身而不是TextField 。 當前，您正在某個抽象（可能是某個容器）標簽（ TextField ）上執行getValue() )，而不是在input本身上執行。

這是它的完成方式。

Answer 4

您可以像這樣獲取輸入值：

 this.refs.password.input.value;