ReactNativeテキストをクリアするコードを分離して入力すると表示

Question

ReactNativeにいくつかの経験がありますが、一般的な定型文のようなより良いフォルダ構造で構築しようとしています。

私はすべてのroutes/Loginディレクトリに、この問題に関連し、次のファイルがあります。

• index.js
• Login.js
• LoginContainer.js
• styles.js（それほど含まれていないは関係ありませんが）。

下記の内容を参照してください（関連するものは除外されています）。私の機能のほとんどを抽出Login.js

import React, { Component } from 'react'; 
import { View, Text, TextInput } from 'react-native'; 
import { Actions } from 'react-native-router-flux'; 
import Spinner from 'react-native-loading-spinner-overlay'; 

const Login = (props) => { 

    const { updateState, signIn, createAccount, error, confirmPasswordVisible, loginSubmit, inputPassword } = props; 

    return (
     <View style={{margin: 128}}> 
     <Spinner visible={props.loading} textStyle={{color: "#FFF"}} /> 
     <Text onPress={Actions.Login}>This is PageOne!</Text> 
     <TextInput 
      style={{height: 40}} 
      placeholder="Email here" 
      onChangeText={(email) => updateState({ email })} 
     /> 
     <TextInput 
      style={{height: 40}} 
      placeholder="Password here" 
      secureTextEntry={true} 
      ref={component => inputPassword = component} 
      onChangeText={(password) => updateState({ password })} 
     /> 
     <Text onPress={loginSubmit} >LOGIN</Text> 
     </View> 
    ) 
} 

Login.propTypes = { 
    updateState: React.PropTypes.func, 
    loginSubmit: React.PropTypes.func, 
    signIn: React.PropTypes.func, 
    createAccount: React.PropTypes.func, 
    inputPassword: React.PropTypes.string, 
    error: React.PropTypes.string, 
    confirmPasswordVisible: React.PropTypes.bool, 
}; 

export default Login; 

import React, { Component } from 'react'; 
import Login from './Login'; 

import { Api } from '../../lib/api/index'; 

class LoginContainer extends Component { 
    constructor(props) { 
    super(props); 

    this.mounted = false; 
    this.state = { 
     email: '', 
     password: '', 
     confirmPassword: '', 
     confirmPasswordVisible: false, 
     inputPassword: '', 
     error: null, 
     loading: false, 
    }; 
    } 

    componentWillMount() { 
    this.mounted = true; 
    } 

    componentWillUnmount() { 
    this.mounted = false; 
    } 

    componentDidMount() { 
     setInterval(() => { 
     this.setState({ 
      visible: !this.state.loading 
     }); 
     }, 3000); 
    } 

    async loginSubmit(){ 
    console.log(this.state.email) 
    console.log(this.state.password) 
    this.setState({ loading: true }); 
    try{ 
     let response = await Api.auth.login(this.state.email, this.state.password) 
     console.log(await response); 
    }catch (err){ 
     console.log('error'); 
     console.log(err); 
    } 
    // this.setState({ passwordInput: '' }); 
    this.inputPassword.setNativeProps({text: ''}); 
    this.setState({ loading: false }); 
    console.log('AFTER') 
    } 

    render() { 
    return (
     <Login 
     updateState={this.setState.bind(this)} 
     loginSubmit={this.loginSubmit.bind(this)} 
     {...this.state} 
     /> 
    ); 
    } 
} 

export default LoginContainer; 

LoginContainer.js

import LoginContainer from './LoginContainer'; 
import Login from './Login'; 

export { Login }; 
export default LoginContainer; 

index.js

が完璧に働いていると、予想通りの状態で作業することも取り組んでいます。

私はパスワードフィールドをクリアする必要がある問題を克服しようとしています。 は、文字列inputPassword: React.PropTypes.string,

2を定義した）ネイティブサポートドキュメントは、私が

1を持っている私のLogin.js（ビュー）でhttps://facebook.github.io/react-native/docs/direct-manipulation.html

@本の簡単な例を示しリアクト）propsから取得constでそれを持っています。

3）は、this.setState({ passwordInput: '' });

4）もまた、このthis.inputPassword.setNativeProps({text: ''});喜びようにリンクごとにそれを直接更新しようとした更新状態を使用して更新しようとしました。

私は、私はちょうどそれが間違って近づいています考えて、この私を助けるために誰かのために多くの愛でしょう：D

Answer 1

と

_textInput.setNativeProps({text: ''});

あなたはTextInputにdefaultValueプロパティを使用し、それをLoginコンポーネントの小道具を使用して''のデフォルト値を与える必要があります：

<TextInput 
    style={{height: 40}} 
    placeholder="Password here" 
    secureTextEntry={true} 
    defaultValue={props.inputPassword} 
    ref={component => inputPassword = component} 
    onChangeText={(password) => updateState({ password })} 
/> 

これはintに渡す必要がありますoをあなたが{...this.state}を指定したが、それはデバッグの価値がここにコンテナからLoginコンポーネント：

<Login 
    updateState={this.setState.bind(this)} 
    loginSubmit={this.loginSubmit.bind(this)} 
    {...this.state} 
/> 

私もthis.setState({ passwordInput: '' });を注意をコメントアウトして、プロパティ名が逆に - あなたはおそらくを使用するためのもの？

Answer 2

遊んでのビットの後、私はそれが仕事を得るために管理しているように見える、私は例を使用しますがwas not under this

以下のようになります。

ref={component => this._textInput = component}