Ответ на native get TextInput value

Question

Я застрял в очень простой проблеме. У меня есть форма входа с именем пользователя, паролем и кнопкой. В обработчике кнопок я пытаюсь получить значение textinput. Но всегда получайте неопределенное значение. Я что-то упускаю?

render() { 
     <ExScreen 
      headerColor={this.state.headerColor} 
      scrollEnabled={this.state.enableScroll} 
      style={styles.container} > 
      <View > 
      <View > 
       <View style={[styles.inputContainer]} > 
       <TextInput 
        ref= "username" 
        onChangeText={(text) => this.setState({text})} 
        value={this.state.username} 
       /> 
       </View> 
<Button style={{color: 'white', marginTop: 30, borderWidth: 1, borderColor: 'white', marginLeft: 20*vw, marginRight: 20*vw, height: 40, padding: 10}} 
      onPress={this._handlePress.bind(this)}> 
       Sign In 
      </Button> 
... 
_handlePress(event) { 
    var username=this.refs.username.value; 

Answer 1

ли вы попробовать

var username=this.state.username; 

Answer 2

Пожалуйста, позаботьтесь о том, как использовать SetState(). Правильная форма

this.setState({ 
     Key: Value, 
    }); 

И поэтому я хотел бы сделать это следующим образом:

onChangeText={(event) => this.setState({username:event.nativeEvent.text})} 
...  
var username=this.state.username; 

Answer 3

проход username в качестве аргумента в вашем onChangeText обратного вызова, чтобы использовать ES6 свойство стенографии

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

затем в вашем _handlePress

_handlePress(event) { 
    let username=this.state.username; 
} 

Answer 4

Эта часть кода работала для меня. То, что я отсутствовал был я не проходил «это» в кнопке действия:

onPress={this._handlePress.bind(this)}> 
-------------- 

    _handlePress(event) { 
console.log('Pressed!'); 

var username = this.state.username; 
var password = this.state.password; 

console.log(username); 
console.log(password); 
} 

    render() { 
    return (
     <View style={styles.container}> 

     <TextInput 
     ref="usr" 
     style={{height: 40, borderColor: 'gray', borderWidth: 1 , marginTop: 10 , padding : 10 , marginLeft : 5 , marginRight : 5 }} 
     placeHolder= "Enter username " 
     placeholderTextColor = '#a52a2a' 

     returnKeyType = {"next"} 
     autoFocus = {true} 
     autoCapitalize = "none" 
     autoCorrect = {false} 
     clearButtonMode = 'while-editing' 
     onChangeText={(text) => { 
      this.setState({username:text}); 
     }} 
     onSubmitEditing={(event) => { 
    this.refs.psw.focus(); 

     }} 
     /> 

     <TextInput 
     ref="psw" 
     style={{height: 40, borderColor: 'gray', borderWidth: 1 , marginTop: 10,marginLeft : 5 , marginRight : 5}} 
     placeholder= "Enter password" 
     placeholderTextColor = '#a52a2a' 
     autoCapitalize = "none" 
     autoCorrect = {false} 
     returnKeyType = {'done'} 
     secureTextEntry = {true} 
     clearButtonMode = 'while-editing' 
     onChangeText={(text) => { 
      this.setState({password:text}); 
     }} 
     /> 

     <Button 
     style={{borderWidth: 1, borderColor: 'blue'}} 
     onPress={this._handlePress.bind(this)}> 
     Login 
     </Button> 

     </View> 
    );`` 
    } 
} 

Answer 5

Если вы похожи на меня и не хочет использовать или загрязнять состояние для одноразовых компонентов вот что я сделал:

export default class Registartion extends Component { 
    _register =() => { 
    const payload = { 
     firstName: this.firstName, 
     /* other values */ 
    } 

    console.log(payload) 
    } 

    render() { 
    return (
     <RegisterLayout> 
     <Text style={styles.welcome}> 
      Register 
     </Text> 

     <InputText 
      placeholder="First Name" 
      onChangeText={(text) => this.firstName = text} /> 
     // More components... 
     <CustomButton 
      backgroundColor="steelblue" 
      handlePress={this._register}> 
      Submit 
     </CustomButton> 
    </RegisterLayout> 
    ) 
    } 
} 

Answer 6

пользователя в инициализации класса:

constructor() { 
    super() 
    this.state = { 
     email: '' 
    } 
} 

Тогда в некоторой функции:

handleSome =() => { console.log(this.state.email) };

И на входе:

<TextInput onChangeText={(email) => this.setState({email})}/>

Answer 7

In Реагировать Родной 0,43: (Может быть, позже, чем 0,43 в порядке.)

_handlePress(event) { 
    var username= this.refs.username._lastNativeText; 

Answer 8

Вы должны использовать государства, чтобы сохранить значение полей ввода. https://facebook.github.io/react-native/docs/state.html

• Для обновления значения состояния использования setState

onChangeText = {(значение) => this.setState ({имя пользователя: значение})}

• и получите входное значение, подобное этому

это.state.username

Пример кода

export default class Login extends Component { 

    state = { 
     username: 'demo', 
     password: 'demo' 
    }; 

    <Text style={Style.label}>User Name</Text> 
    <TextInput 
     style={Style.input} 
     placeholder="UserName" 
     onChangeText={(value) => this.setState({username: value})} 
     value={this.state.username} 
    /> 

    <Text style={Style.label}>Password</Text> 
    <TextInput 
     style={Style.input} 
     placeholder="Password" 
     onChangeText={(value) => this.setState({password: value})} 
     value={this.state.password} 
    /> 

    <Button 
     title="LOGIN" 
     onPress={() => 
      { 
       if(this.state.username.localeCompare('demo')!=0){ 
        ToastAndroid.show('Invalid UserName',ToastAndroid.SHORT); 
        return; 
       } 

       if(this.state.password.localeCompare('demo')!=0){ 
        ToastAndroid.show('Invalid Password',ToastAndroid.SHORT); 
        return; 
       } 

       //Handle LOGIN 

      } 
     } 
    /> 

Answer 9

Если установить текстовое состояние, то почему бы не использовать это непосредственно?

_handlePress(event) { 
    var username=this.state.text; 

Конечно, имена переменных могут быть более наглядными, чем «текст», но ваш вызов.