onPressハンドラの<TextInput>の値を取得するにはどうすればよいですか？

Question

私は<TextInput>を持っていると私はこれを行うことによって、それをref属性を与えた：ユーザーがthis.usernameInputの値を取得しようと<TouchableInput>を押すと

ref={node => this.usernameInput = node;} 

はその後、私は方法があります。 this.usernameInputは私のonPressメソッドではnullではありませんが、値を取得する方法が見つかりません！私がこれをするとき：

console.log(this.usernameInput.value); 

それはundefinedを記録します。私がブレークポイントを設定して、this.usernameInputを調べると、それは見ることができますが、valueのプロパティやメソッドはなく、現在の値を返すことができるプロパティやメソッドは表示されません。 <TextInput>の値を取得するにはどうすればよいですか？

EDIT

は、ここに私のコンポーネントクラスです：

import { 
    View, 
    Text, 
    TextInput, 
    TouchableHighlight 
} from 'react-native'; 
import {Manager as ModalManager} from 'react-native-root-modal'; 

class AppContainer extends React.Component { 
    loginModal; 

    constructor(props){ 
     super(props); 
    this._onLoginPress = this._onLoginPress.bind(this); 
     this._createLoginModal = this._createLoginModal.bind(this); 
    } 

    async componentWillMount() { 
    this._createLoginModal(); 
    } 

    render() { 
     return (
     <View > 
      <Text>Hello.</Text> 
     </View> 
    ); 
    } 
    } 

    _onLoginPress() { 
    //this returns 'undefined', although this.usernameInput is not undefined 
    console.log(`USERNAMEinputValue: ${this.usernameInput.props.value}`); 
    } 

    _createLoginModal() { 
    this.loginModal = new ModalManager(
     <View > 
      <View > 

      <Text>Username:</Text> 
      <TextInput 
       placeholder="Username" 
         ref={node => { 
         this.usernameInput = node; 
       }} 
      ></TextInput> 

      <TouchableHighlight 
       onPress={this._onLoginPress} 
      > 
       <Text>Login</Text> 

      </TouchableHighlight> 

      </View> 
     </View> 
    ); 
    } 

} 

Answer 1

反応ネイティブソースコードを通過した後、TextInputコンポーネントのテキストを保持するパラメータ_lastNativeTextが見つかりました。あなたはあなたの例のために以下のような値を得るためにそのパラメタを使うかもしれません。

this.usernameInput._lastNativeText

しかし、それでもまだ、私はこのアプローチを使用することをお勧めしません。 @jayce444と@nifi

Answer 2

何な状態でユーザ名を格納については？リアクト（及びRN）は、一般的にアンチパターンであるのRefを用い

console.log(this.state.username); 

Answer 3

：

_onLoginPressに続い

<TextInput 
    ref="username" 
    onChangeText={(username) => this.setState({username})} 
    value={this.state.username} 
/> 

。 Don't Overuse RefsおよびLifting State Upを参照してください。場合によっては必要ですが、これはそのようなケースの1つではありません。 Reduxを使用しているため、少なくとも3つの実行可能なオプションがあります。

ていない優先順位で：

1. コンポーネントでローカル状態を使用して：

   constructor(props) { 
       super(props); 
   
       this.state = { 
       username: '' 
       }; 
   } 
   
   render() { 
       return (
       <TextInput 
        placeholder="Username" 
        value={this.state.username} 
        onChangeText={(username) => this.setState({username})} 
       /> 
   ); 
   } 
   

2. グローバル状態の値を記憶し、例えば、使用react-reduxミドルウェアのconnectは、その状態の一部をコンポーネントの小道具にマッピングする機能を持っています。これを実装する方法については、using react-redux with Reduxを参照してください。

3. 親コンポーネントに値を格納する。この考え方は、最初のコード例と同じですが、値とonChangeコールバック関数を子コンポーネントにpropsとして提供する点が異なります。推理

   オプション：

   console.log(this.state.username); // (1) & (3) 
   

   または

   console.log(this.props.username); // (2) 
   

   ---

   EDITを使用して、あなたが出力する入力の値をすることができ、これらのすべての場合において

選択は依存する状況、そして時には純粋に好みの問題です。Reduxの著者のthis commentを参照してください。 tl; drは最も論理的/妥当と思われることをします。これはしばしば、状態を「持ち上げる」こと、またはグローバル状態を使用することを意味します。通常、データを必要とするコンポーネントだけがローカルの状態でデータを格納する場合、そのデータを必要とするときはいつでも推論することができます。

stateless functional componentsが好ましいとされます。推論を参照してください。 here。反応文書は、機能コンポーネントの今後のパフォーマンス上の利点について言及していましたが、削除されています。コンポーネントライフサイクルメソッドやローカルステートが必ずしも必要でない場合は、ステートレス機能コンポーネントを使用し、コンポーネントチェーン内の状態を上位に格納します。