Nie jestem pewien, kiedy użyć onChange
vs onChangeText
w składniku TextInput
. Wiem, że onChangeText
akceptuje zmieniony tekst jako argument w wywołaniu zwrotnym, ale czy to dlatego użyjesz changeText
, ponieważ możesz wtedy zaktualizować stan w ramach wywołania zwrotnego?React Native - Różnica między onChange vs OnChangeText of TextInput
7
A
Odpowiedz
19
onChangeText
jest po prostu uproszczoną wersją onChange
, dzięki czemu można z niego łatwo korzystać, bez konieczności przechodzenia przez event.target.value
, aby uzyskać zmienioną wartość. Więc kiedy powinieneś używać onChange
i kiedy onChangeText
? Jeśli masz prosty formularz z kilku textinputs lub prostą logiką, można przejść od razu i używają onChangeText
<TextInput value={this.state.name} onChangeText={(text) => this.setState({name: text})}>
Jeśli masz bardziej skomplikowane formy i/lub masz więcej logiki w danych manipulacji (jak obsługa tekstu inaczej z numeru), gdy użytkownik zmienia dane wejściowe, lepiej jest z funkcją zmiany, ponieważ zapewnia większą elastyczność. Na przykład:
handleChange(event) {
const {name, type, value} = event.nativeEvent;
let processedData = value;
if(type==='text') {
processedData = value.toUpperCase();
} else if (type==='number') {
processedData = value * 2;
}
this.setState({[name]: processedData})
}
<TextInput name="username" type="text" value={this.state.username} onChange={this.handleChange}}>
<TextInput name="password" type="number" value={this.state.password} onChange={this.handleChange}}>
Powiązane problemy
- 1. Odrzucanie klawiatury w wielowierszowej wtyczce TextInput w React native
- 2. Zidentyfikuj działanie klawisza powrotu w React Native
- 3. React Native: Jak zachować wielowierszowy textinput widoczny powyżej klawiatury
- 4. jak wyczyścić ostrość TextInput w React Native? (Android)
- 5. React Native vs Ionic 2
- 6. React Native - Nie można utworzyć wpisu tekstowego
- 7. Ustaw wysokość ListView w React Native
- 8. React Native: Używając złomu lodtajlowego
- 9. React native vs stwórz aplikację natywną reagować
- 10. React-Router onChange hook
- 11. React-Native: Dismiss/Exit React-Native View powrót do Native
- 12. Czy istnieje sposób wykonywania funkcji letterSpacing dla funkcji TextInput w trybie React Native?
- 13. różnica między onClick() i onChange() (przyciski radiowe)
- 14. ReactNative TextInput niewidoczne iOS
- 15. React wybierz onChange nie działa
- 16. React natywną TextInput granicę nie działa
- 17. React Native - Przekierowanie zalogował się użytkownik Firebase do Home Component
- 18. React-Native + crypto: Jak wygenerować HMAC w React-Native?
- 19. Styling React Native Picker
- 20. React Native View Renderowanie
- 21. React biblioteki Native Mapy
- 22. React Native Infinite Scroll
- 23. React Native File Chooser
- 24. React Native: 0.41 app.json
- 25. React Controlled vs wejść niekontrolowanych
- 26. Flux + React vs Backbone + React
- 27. React componentDidMount vs getInitialState
- 28. Przykład nawigacji między widokami w React Native Android?
- 29. React Native - Headless JS example
- 30. React Native kontur czcionki/textShadow