ReactNative Clear Text Input with Separated Code & View

Question

У меня есть опыт работы с ReactNative, но, продвигаясь вперед, пытаясь построить его с лучшей структурой папок, например, с популярными шаблонами.

У меня есть следующие файлы, относящиеся к этому вопросу все в каталоге routes/Login:

• index.js
• Login.js
• LoginContainer.js
• styles.js (не имеет значения, так не включены).

См. Ниже содержание (снятое с того, что актуально).

index.js

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

export { Login }; 
export default LoginContainer; 

LoginContainer.js

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; 

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; 

Извлеченные большую часть моей функции прекрасно работает и работает с государствами также работает, как ожидалось.

Я пытаюсь решить проблему, требующую очистки поля пароля. Реагировать Родные документы поддержки показывают простой пример этого @https://facebook.github.io/react-native/docs/direct-manipulation.html

В моем Login.js (View) у меня есть

1) определил строку inputPassword: React.PropTypes.string,

2) иметь его в const извлеченного из props.

3) Пробовал обновлять его, используя состояние обновления this.setState({ passwordInput: '' });

4.) пытался также обновить его непосредственно согласно ссылке, как этот this.inputPassword.setNativeProps({text: ''}); также нет радости.

Я думаю, что я просто приближается к нему так, что большая любовь к кому-то, чтобы помочь мне с этим: D

Answer 1

Вы должны использовать defaultValue собственность на TextInput и дать ему значение по умолчанию '' с использованием реквизита на Login компонента:

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

Это должно быть передано int О, Login компонента из контейнера здесь, где указанный вами {...this.state}, но это стоит отладка:

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

Я также отметить this.setState({ passwordInput: '' }); закомментирована и имя свойства обратная - вы, вероятно, имел в виду использовать ?

Answer 2

После немного играть вокруг я, кажется, удалось получить его работу, я использовал пример, но не был ниже this

Так далее ..

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

с

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