javascript - 反応のマテリアルUIでパスワードフィールド値を取得する方法

Question

の値にアクセスでき<TextField />ません。書き込まない<input type='password'/>と正常に動作しますが、このために TypeError が発生します。 '。

 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 の場合

inputRef を使用

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

値を読み取るには、以下の行を使用します

console.log(this.fv.value);

Answer 3

ref="password"の代わりに入力自体に割り当てTextFieldます。現在、それ自体ではなく、getValue()抽象 (おそらく何らかのコンテナー) タグ ( ) で実行しています。TextFieldinput

これがその方法です。