react-native - pattern - textinput react native

reaccionar nativo obtener valor de TextInput

Question

Estoy atrapado con un problema muy simple. Tengo un formulario de inicio de sesión con nombre de usuario, contraseña y botón. En mi controlador de botón, trato de obtener el valor de entrada de texto. Pero siempre obtenga un valor indefinido. ¿Me estoy perdiendo de algo?

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

Debe usar States para almacenar el valor de los campos de entrada. https://facebook.github.io/react-native/docs/state.html

• Para actualizar los valores de estado use setState

onChangeText = {(value) => this.setState ({username: value})}

• y obtener un valor de entrada como este

this.state.username

Código de muestra

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 2

En React Native 0.43: (Quizás más tarde que 0.43 está bien).

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

Answer 3

Este pedazo de código funcionó para mí. Lo que me faltaba era que no estaba pasando ''esto'' en la acción del botón:

 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 4

Has probado

var username=this.state.username;

Answer 5

Por favor, tenga cuidado sobre cómo usar setState (). La forma correcta es

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

Y entonces lo haría de la siguiente manera:

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

Answer 6

Prueba este código:

  <TextInput
    style={{height: 40, borderColor: ''gray'', borderWidth: 1}}
    onChangeText={(text) => this.setState({text})}
    value={this.state.text}
  />

obtener valor aquí:

_handlePress() {
   const username = this.state.text;
}

Answer 7

Si configura el estado del texto, ¿por qué no usarlo directamente?

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

Por supuesto, la denominación variable podría ser más descriptiva que ''texto'', pero su llamada.

Answer 8

Si usted es como yo y no quiere usar ni contaminar el estado de los componentes únicos, esto es lo que hice:

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 9

Usuario en el inicio de clase:

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

Luego en alguna función:

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

Y en la entrada:

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

Answer 10

pasar username como argumento en su devolución de llamada onChangeText para usar la taquigrafía de la propiedad es6

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

luego en tu método _handlePress

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