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;
}