web-dev-qa-db-fra.com

Comment changer le texte Valeur lors du clic dans React Native?

Je suis un développeur iOS travaillant actuellement sur une application expérimentale React Native ..__ J'ai le code suivant qui affiche un bouton et un exemple de texte à l'écran. 

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: {}
});

Le code ci-dessus affiche du texte et un bouton.

Cependant, lorsque je clique sur le bouton, l'application se bloque au lieu d'afficher le nouveau texte à afficher.

Je suis nouveau dans React Native, merci de me guider pour résoudre l'erreur.

javascriptiosreactjsreact-nativesetstate
7
SeaWarrior404

Vous pouvez utiliser un état pour conserver votre texte par défaut, puis appuyer sur pour mettre à jour l'état.

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>
    )
  }
}
15
gocci

Vous pouvez utiliser state pour modifier dynamiquement le texte 

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>

   );
 }
}
0
Muhammd Asad Chattha

C'est parce que votre fonction onPress est un peu bizarre, vous voulez invoquer une action sur la presse sans avoir d'éléments jsx Votre changeTextValue est ce qui doit être transmis à votre bouton sous pression.

0
Matt Aft

Vous pouvez utiliser cette approche pour mettre à jour une valeur en cliquant sur un bouton.

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>
   }
}
0
cobragin neshi