wake-up-neo.com

Wie kann man den Text Wert beim Drücken der Taste in React Native ändern?

Ich bin ein iOS-Entwickler, der gerade an einer experimentellen React Native-App arbeitet. Ich habe den folgenden Code, der eine Schaltfläche und einen Beispieltext auf dem Bildschirm anzeigt. 

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

Der obige Code zeigt Text und eine Schaltfläche an.

Wenn ich jedoch auf die Schaltfläche klicke, stürzt die App ab, anstatt den neuen Text anzuzeigen, der angezeigt werden soll.

Ich bin neu bei React Native. Bitte leite mich bei der Lösung des Fehlers.

7
SeaWarrior404

Sie können einen Status verwenden, um Ihren Standardtext beizubehalten, und dann aktualisieren wir den Status auf Presse.

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

Sie können state verwenden, um den Text dynamisch zu ändern

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>

   );
 }
}

Dies liegt daran, dass Ihre OnPress-Funktion etwas komisch ist. Sie möchten eine Aktion beim Drücken aufrufen und haben keine Jsx-Elemente. Ihre changeTextValue sollte in die onPress-Schaltfläche Ihres Buttons übernommen werden.

0
Matt Aft

Sie können diesen Ansatz verwenden, um einen Wert auf Knopfdruck zu aktualisieren

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