web-dev-qa-db-fra.com

réagir nativement obtenir la valeur TextInput

Je suis coincé avec un problème très simple. J'ai un formulaire de connexion avec nom d'utilisateur, mot de passe et bouton. Dans mon gestionnaire de boutons, j'essaie d'obtenir la valeur d'entrée de texte. Mais obtenez toujours une valeur indéfinie. Est-ce que je manque quelque chose?

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;
react-native
37
WayneZhao

Le moyen le plus rapide et le moins optimisé de le faire consiste à utiliser la fonction de flèche dans votre rappel onChangeText, en passant username comme argument de votre rappel à onChangeText.

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

puis dans votre méthode _handlePress

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

Mais cela a plusieurs inconvénients !!!

  1. A chaque rendu de ce composant, une nouvelle fonction de flèche est créée.
  2. Si le composant enfant est un PureComponent, il forcera inutilement les rendus à nouveau, ce qui posera d'énormes problèmes de performances, en particulier lorsqu'il s'agira de listes, de tables ou de composants de grande taille itérés sur de grands nombres. Plus d'informations à ce sujet dans React Docs

La meilleure pratique consiste à utiliser un gestionnaire tel que handleInputChange et à lier `` `this`` dans le constructeur.

...
constructor(props) {
  super(props);
  this.handleInputChange = this.handleInputChange.bind(this);
}

...
handleInputChange(event = {}) {
  const name = event.target && event.target.name;
  const value = event.target && event.target.value;

  this.setState([name]: value);
}
...

render() {
  ...
  <TextInput
    name="username"
    onChangeText={this.handleChange}
    value={this.state.username}
  />
  ...
}

...

Ou si vous utilisez un raccourci de la propriété de classe es6 qui autobinds this. Mais cela présente des inconvénients en termes de tests et de performances. Lire la suite ici

...
handleInputChange = (event = {}) => {
  const name = event.target && event.target.name;
  const value = event.target && event.target.value;

  this.setState([name]: value);
}
...

render() {
  ...
  <TextInput
    name="username"
    onChangeText={this.handleChange}
    value={this.state.username}
  />
  ...
}

...
43
ferndopolis

Dans React Native 0.43: (Peut-être que plus tard que 0.43 est OK.)

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

 enter image description here

14
jiexishede

Si vous êtes comme moi et que vous ne voulez pas utiliser ou polluer l'état de composants uniques, voici ce que j'ai fait:

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>
    )
  }
}
11
JohnnyQ

Vous devez utiliser States pour stocker la valeur des champs de saisie . https://facebook.github.io/react-native/docs/state.html

  • Pour mettre à jour les valeurs d'état, utilisez setState

onChangeText = {(valeur) => this.setState ({nom d'utilisateur: valeur})}

  • et obtenir une valeur d'entrée comme celle-ci

this.state.username

Exemple de code 

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

            }
        }
    />
6
Hitesh Sahu

export default class App extends Component {
  state = { username: '', password: '' }

  onChangeText = (key, val) => {
    this.setState({ [key]: val})
  }
  
  render() { 
    return (
      <View style={styles.container}>
          <Text>Login Form</Text>
          <TextInput
            placeholder='Username'
            onChangeText={val => this.onChangeText('username', val)}
            style={styles.input}
          />
          <TextInput
            placeholder='Password'
            onChangeText={val => this.onChangeText('password', val)}
            style={styles.input}
            secureTextEntry={true}
          />      
      </View>
    );
  }
}

J'espère que cela résoudra votre problème

2
Mithhu

Veillez à utiliser setState (). La forme correcte est

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

Et donc je le ferais comme suit:

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

Ce travail pour moi 

    <Form>

    <TextInput
    style={{height: 40}}
    placeholder="userName"
    onChangeText={(text) => this.userName = text}
    />

    <TextInput
    style={{height: 40}}
    placeholder="Password"
    onChangeText={(text) => this.Password = text}
    />


    <Button 
    title="Sign in!" 
    onPress={this._signInAsync} 
    />

    </Form>

et

  _signInAsync = async () => {
        console.log(this.userName)
        console.log(this.Password) 
  };
0
Ryosuke Hujisawa

Utilisateur dans l'init de la classe:

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

Puis dans certaines fonctions:

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

Et dans l'entrée:

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

0
Giovanny Gonzalez

Si vous définissez l'état du texte, pourquoi ne pas l'utiliser directement? 

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

Bien sûr, le nom de la variable pourrait être plus descriptif que 'text' mais votre appel.

0
Bruce Xinda Lin