2016-09-14 2 views
1

React-Nativeで単純なボタンを押した後に2つのアクションを実行したいと思います。 正直言って、それは非常に単純なはずですが、どういうわけか、2番目は決して実行されません。React-nativeのボタンを押した後のダブルトリガー

//Clean static function in its own class 
class Aws { 
    static register(phonenumber, username, password) { 
    ClientConf = { 
     "UserPoolId" : "eee", 
     "ClientId" : "eee", 
     "Region": "us-east-1" 
    } 
    console.log("Aws Register"); 
    AWSCognito.config.region ="ccc"; 
    var poolData = { 
     UserPoolId : "bbb", // Your user pool id here 
     ClientId: "aaa" 
    }; 
    var userPool = new AWSCognito.CognitoIdentityServiceProvider.CognitoUserPool(poolData); 
    var attributeList = []; 
    var dataPhoneNumber = { 
     Name : 'phone_number', 
     Value : phonenumber 
    } 
    var attributePhoneNumber = new AWSCognito.CognitoIdentityServiceProvider.CognitoUserAttribute(dataPhoneNumber); 
    attributeList.push(attributePhoneNumber); 
    userPool.signUp(username, password, attributeList, null, function(err, result){}); 
    } 
} 

//Register Page, react-native Component 

class RegisterPage extends Component { 
    renderScene(route, navigator) { 
    return (<View> 
     <Text style={styles.saved}>Create an account</Text> 

     <Form 
     ref='registrationForm' 
     onFocus={this.handleFormFocus.bind(this)} 
     onChange={this.handleFormChange.bind(this)} 
     label="Personal Information"> 

     <InputField 
      ref='username' 
      placeholder='Username' 
      placeholderTextColor="#888888" /> 

<InputField 
      ref='phoneNumber' 
      placeholder='Phone Number' 
      placeholderTextColor="#888888" /> 

     <InputField 
      ref='password' 
      placeholder='Password' 
      placeholderTextColor="#888888" /> 
     </Form> 

<TouchableHighlight> 
     onPress={Aws.register(this.state.formData.phoneNumber, this.state.formData.username, this.state.formData.password) && this.gotoNext.bind(this)} 
     underlayColor='#78ac05'> 
     <View><Text>Register</Text></View></TouchableHighlight> 

    </View>); 
    } 

    gotoNext() { 
    this.props.navigator.push({ 
     id: 'MainPage', 
     name: 'mynamedpage', 
    }); 
    } 
} 

私はできる限りコードを簡素化しようとしました。

onPress={Aws.register(this.state.formData.phoneNumber, this.state.formData.username, this.state.formData.password) && this.gotoNext.bind(this)} 

最初の関数は、よく実行されますが、私の画面では、次のページに移動しません:

問題は、この行で発生しています。 移動先:

onPress={this.gotoNext.bind(this)} 

ページがよく変化しています。この場合、

onPress={this.gotoNext.bind(this) && Aws.register(this.state.formData.phoneNumber, this.state.formData.username, this.state.formData.password)} 

第2の関数のみが実行されます。

どのようにこれらの2つのアクションを実行できますか?私は前のテストでは論理を見ません。 また、私は両方を1つの関数に入れてみましたが、問題は残ります。 このコードは、目的に応じて最適化されています(コンストラクタなどが削除されています)。

答えて

0

あなたAws.register()関数には、パラメータとしてコールバックを渡すことができuserPool.signUp()のコールバック関数に離れて航行

//Clean static function in its own class 
class Aws { 
    static register(phonenumber, username, password, callback) { 
    ClientConf = { 
     "UserPoolId" : "eee", 
     "ClientId" : "eee", 
     "Region": "us-east-1" 
    } 
    console.log("Aws Register"); 
    AWSCognito.config.region ="ccc"; 
    var poolData = { 
     UserPoolId : "bbb", // Your user pool id here 
     ClientId: "aaa" 
    }; 
    var userPool = new AWSCognito.CognitoIdentityServiceProvider.CognitoUserPool(poolData); 
    var attributeList = []; 
    var dataPhoneNumber = { 
     Name : 'phone_number', 
     Value : phonenumber 
    } 
    var attributePhoneNumber = new AWSCognito.CognitoIdentityServiceProvider.CognitoUserAttribute(dataPhoneNumber); 
    attributeList.push(attributePhoneNumber); 
    userPool.signUp(username, password, attributeList, null, function(err, result){ callback() }); 
    } 
} 

//Register Page, react-native Component 

class RegisterPage extends Component { 
    renderScene(route, navigator) { 
    return (<View> 
     <Text style={styles.saved}>Create an account</Text> 

     <Form 
     ref='registrationForm' 
     onFocus={this.handleFormFocus.bind(this)} 
     onChange={this.handleFormChange.bind(this)} 
     label="Personal Information"> 

     <InputField 
      ref='username' 
      placeholder='Username' 
      placeholderTextColor="#888888" /> 

<InputField 
      ref='phoneNumber' 
      placeholder='Phone Number' 
      placeholderTextColor="#888888" /> 

     <InputField 
      ref='password' 
      placeholder='Password' 
      placeholderTextColor="#888888" /> 
     </Form> 

<TouchableHighlight> 
     onPress={Aws.register(this.state.formData.phoneNumber, this.state.formData.username, this.state.formData.password, this.gotoNext.bind(this))} 
     underlayColor='#78ac05'> 
     <View><Text>Register</Text></View></TouchableHighlight> 

    </View>); 
    } 

    gotoNext() { 
    this.props.navigator.push({ 
     id: 'MainPage', 
     name: 'mynamedpage', 
    }); 
    } 
} 
+0

感謝をお試しください!あなたの例では、callback()は未定義です。さらに、別のクラスのコールバック関数にビュー/コンポーネントを渡して、正しいコンテキストでgotoNext()を実行できるかどうかはわかりません。 – Arkon

+0

両方の場所を修正しましたか、onPress()ですか?私は余分なパラメータを追加しました – Skriptotajs

+0

この変更の後にregister()関数に何らかの無限ループがあるように見えます。本当に分かりません。それを詳細にデバッグしよう – Arkon

関連する問題