J'essaie de récupérer les entrées de l'utilisateur, de les enregistrer dans une variable, puis de les envoyer au magasin. Mais peu importe ce que j'essaye, je suis toujours «indéfini», pourquoi?
J'ai l'impression d'avoir tout essayé. J'ai d'abord pensé que ma portée était erronée. Ensuite, j'ai pensé qu'il était tout simplement impossible de setState / getState, mais il définit l'état, tout aussi indéfini.
onChangeText={text => this.updateInputValue(text)}
Dans la fonction updateInputValue (evt):
console.log(evt) = SyntheticEvent {dispatchConfig: {phasedRegistrationNames: {captured: "onChangeCapture", bubbled: "onChange"}}, _targetInst: FiberNode, _dispatchListeners: function, _dispatchInstances: FiberNode, nativeEvent: {target: 3, text: "D", eventCount: 1}, …}
Initialement console.log (evt.target.value) = {inputValue: ''} (comme prévu)
Mais onChange console.log (evt.target.valur) = {inputValue: undefined}
C'est le plus simple une façon de le faire a été suggérée par quelques personnes ci-dessous (merci):
Si vous n'avez besoin que de la valeur de texte elle-même, utilisez l'événement onChangeText> à la place:
import React from 'react';
import { View } from 'react-native';
import { Button, Input } from 'react-native-elements';
export default class HomeScreen extends React.Component {
constructor(props) {
super(props);
this.state = {
inputValue: ''
};
}
//update input value
updateInputValue(evt) {
console.log(evt)
console.log(evt.target.value)
let saveInputValue = evt.target.value
this.setState({
inputValue: saveInputValue
});
console.log(this.state)
}
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Input
placeholder='User Input'
containerStyle={{width:'50%'}}
value={this.state.inputValue}
onChange={evt => this.updateInputValue(evt)}
/>
<View style={{flex:0.03}}/>
<Button title="Go to Second Screen"
//onPress={() => {this.handleClick()}}
buttonStyle={{ backgroundColor: '#C7D8C6' }}
/>
</View>
);
}
}
L'entrée react-native-elements est juste un wrapper autour du React Native TextInput et hérite de tous ses accessoires, comme vous pouvez le voir dans le docs.
3 Réponses :
Si tout ce dont vous avez besoin est la valeur du texte elle-même, utilisez plutôt l'événement onChangeText :
onChangeText={text => this.updateInputValue(text)}
L'entrée react-native-elements est juste un wrapper autour du Réagissez Native TextInput et hérite de tous ses accessoires, comme vous pouvez le voir dans la documentation .
Vous pouvez faire ce qui suit pour que cela fonctionne.
1- Essayez setState en utilisant la fonction fléchée dans onChange.
updateInputValue = (evt) => {
console.log(evt)
console.log(evt.target.value)
let saveInputValue = evt.target.value
this.setState({
inputValue: saveInputValue
});
console.log(this.state)
}
2- Essayez de faire de votre méthode updateInputValue une flèche, car dans le contexte javascript de cela change en fonction de la façon dont vous appelez la fonction.
onChange={event => this.setState({inputValue: event.target.value})}
Il semble que vous utilisez le kit d'interface utilisateur React Native Elements . Le composant d'entrée fourni par les kits d'interface utilisateur utilise les mêmes accessoires que ceux fournis par TextInput par défaut donné par RN.
Vous pouvez obtenir du texte de deux manières en supposant que vous utilisez ce rappel.
{
nativeEvent: {
eventCount,
target,
text
}
}
Les méthodes mentionnent les accessoires à transmettre à
Méthode 1
onChangeText={text => this.handleTextChange(text)}
Méthode 2 onChange={evt => this.handleTextChange(evt.nativeEvent.text)} // As given by RN Docs
Remarque: L'objet obtenu à partir de l'objet événement pour onChange code > méthode est la suivante.
handleTextChange = (text) => {
this.setState({
youName: text,
})
}
J'espère que cela vous aidera. Mention pour toute clarification sur les commentaires.
essayez avec evt.currentTarget.value
Ne devriez-vous pas utiliser
onChangeTextpour obtenir la valeur?pouvez-vous essayer de faire de votre fonction updateInputValue une fonction de flèche? la référence en javascript est un peu délicate. Essayez donc d'en faire une fonction de flèche ou liez-la dans votre constructeur