Jak zmienić wartość tekstu po kliknięciu przycisku w React Native?
Jestem programistą iOS i obecnie pracuję nad eksperymentalną aplikacją React Native.
Mam następujący kod, który przedstawia przycisk i przykładowy tekst na ekranie.
import React from 'react';
import { StyleSheet, Text, View , Button } from 'react-native';export default class App extends React.Component {
constructor() {
super();
this.state = {sampleText: 'Initial Text'};
} changeTextValue = () => {
this.setState({sampleText: 'Changed Text'});
} _onPressButton() {
<Text onPress = {this.changeTextValue}>
{this.state.sampleText}
</Text>
} render() {
return ( <View style={styles.container}>
<Text onPress = {this.changeTextValue}>
{this.state.sampleText}
</Text> <View style={styles.buttonContainer}>
<Button
onPress={this._onPressButton}
title="Change Text!"
color="#00ced1"
/>
</View>
</View>
);
}
}const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#f5deb3',
alignItems: 'center',
justifyContent: 'center',
},
buttonContainer: {}
});
Powyższy kod wyświetla tekst i przycisk.
Jednak po kliknięciu przycisku aplikacja zawiesza się zamiast wyświetlać nowy tekst, który powinien zostać wyświetlony.
Jestem nowy w React Native, wyjaśnij mi, jak rozwiązać ten błąd.
Nie znaleziono powiązanych wyników
Zaproszony:
Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się
6 odpowiedzi
Anonimowy użytkownik
Potwierdzenie od:
import React, { Component } from 'react'import { View, Text, Button } from 'react-native'export default class App extends Component {
state = {
textValue: 'Change me'
} onPress = () => {
this.setState({
textValue: 'THE NEW TEXT GOES HERE'
})
} render() {
return ( <View style={{paddingTop: 25}}>
<Text>{this.state.textValue}</Text>
<Button title="Change Text" onPress={this.onPress}/>
</View>
)
}
}
Anonimowy użytkownik
Potwierdzenie od:
<pre class="lang-js prettyprint-override">
Anonimowy użytkownik
Potwierdzenie od:
Możesz użyć stanu, aby dynamicznie zmieniać tekst
import React, {Component} from 'react';import {Text, Button, View} from 'react-native';export default class App extends Component{
constructor(){
super();
this.state = {
textValue: 'Temporary text'
}
this.onPressButton= this.onPressButton.bind(this);
}onPressButton() {
this.setState({
textValue: 'Text has been changed'
})
}render(){
return(<View style={{paddingTop: 20}}>
<Text style={{color: 'red',fontSize:20}}> {this.state.textValue} </Text>
<Button title= 'Change Text' onPress= {this.onPressButton}/>
</View> );
}
}
Anonimowy użytkownik
Potwierdzenie od:
Anonimowy użytkownik
Potwierdzenie od:
class App extends React.Component {constructor() {
super();
this.state = { val: 0 }
this.update = this.update.bind(this)
}
update() {
this.setState({ val: this.state.val + 1 })
}
render() {
console.log('render');
return <button onClick={this.update}>{this.state.val}</button>
}
}
Anonimowy użytkownik
Potwierdzenie od:
robi _onPressButton (). Możesz po prostu
setState()
w tej funkcji i nie rób nic więcej, co może pomóc w rozwiązaniu problemu. Jeśli chcesz zrobić coś nowego, musisz dodać
return( )
i zawiń tekst.