Wie ändert sich der Status, wenn die Taste gedrückt wird?

Question

Ich bin neu zu reagieren Native und nicht mit js vertraut.

Ich möchte das Programm zeigen, was ich in TextInput schrieb, als ich die Button gedrückt (es gibt eine Text unter dem Button). Ich dachte, vielleicht sollte ich zwei Zustand machen: Setzen Sie state1 text als Text Eingang, und setzen Sie state2 mimin als TextInput Eingang, und wenn Button pressed, setzen Sie state2 mimin zu state1 text.

Ich habe mit dem Code unten versucht, aber es gab mir rote Seite, wenn ich auf die Button klicke.

import React, { Component } from 'react'; 
import { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    Button, 
    TextInput, 
    Alert, 
    View 
} from 'react-native'; 

export default class Hella extends Component { 

constructor(props) { 
    super(props); 
    this.state = {text: '', mimin: ''}; 
} 

render() { 
    return (
     <View style={styles.container}> 

     <TextInput 
      style={{height: 40}} 
      placeholder="Type here to translate!" 
      onChangeText={(mimin) => this.setState({mimin})} 
     /> 
     <Button 
      onPress={onButtonPress} 
      title="Learn More" 
      color="#841584" 
      accessibilityLabel="Learn more about this purple button" 
     /> 
     <Text style={styles.instructions}> 
      {this.state.text} 
     </Text> 
     </View> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    backgroundColor: '#F5FCFF', 
    } 
}); 

const onButtonPress =() => { 
    Hella.setState({ 
     text: Hella.state.mimin -------> where the error happened 
    }); 
}; 

AppRegistry.registerComponent('Hella',() => Hella); 

Der Fehler war

undefined is not an object (evaluating 'Hella.state.mimin') 

onButtonPress 
<project location>/index.android.js:61 

Was habe ich falsch gemacht? Wie soll ich es erklären? Wo kann ich mehr lernen?

Answer 1

Ihre onButtonPress sollte innerhalb class sein, da Sie setState

export default class Hella extends Component { 
    constructor(props) { 
    ... 
    } 

    onButtonPress =() => { 
    this.setState({ 
     text: this.state.mimin 
    }); 
    } 

    render() { 
    return (
     ... 
     <Button 
     onPress={this.onButtonPress} 
     ... 
     /> 
     ... 
    ); 
    } 
} 

Reagieren Mutter verbraucht viel Reagieren Konzepte tun wollen. Das Erlernen der Grundlagen von React wird dir sehr helfen https://facebook.github.io/react/tutorial/tutorial.html