2016-11-10 30 views
3

私はネイティブに反応し、jsに慣れていないのは初めてです。ボタンを押したときの状態の変更方法は?

私はプログラムは、私がButtonを押したときに私は(Button以下Textがあります)TextInputに書いたものを示したいと思います。私は多分私は2つの状態を作る必要があります考え出し:Text入力としてSTATE1 textを入れ、TextInput入力としてSTATE2 miminを入れ、そしてときボタンpressed、STATE1 textにSTATE2 miminを置きます。

私は以下のコードで試しましたが、Buttonをクリックすると赤いページが表示されました。

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); 

エラーが

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

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

私が間違って何をしましたでしたか?私はそれをどう宣言すべきですか?どこでもっと知ることができますか?

答えて

5

あなたはsetState

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

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

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

をしたいので、あなたのonButtonPressclass内にある必要がありますが、ネイティブが反応概念の多くを使用し反応します。リアクトの学習の基礎は、あなたに多くを手助けしますhttps://facebook.github.io/react/tutorial/tutorial.html

+0

最後にそれは働いた!どうもありがとうございました! :)私はまた、リンクを試してみます – Konayuki

関連する問題