在 React-native 中按下按钮后双触发

Posted 2023-03-14

【中文标题】在 React-native 中按下按钮后双触发

【英文标题】：Double trigger after pushing a button in React-native

【发布时间】：2016-09-14 07:15:02

【问题描述】：

我想应用两个功能，在 React-Native 上按下一个简单的按钮后执行 2 个动作。 老实说，它应该很简单，但不知何故，第二个永远不会执行。

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

只执行第二个函数。

我怎样才能设法执行这两个操作？在之前的测试中我没有看到任何逻辑。 另外，我尝试将它们都放在一个函数中，但问题仍然存在。 请注意，代码已被尽可能地简化（删除了构造函数等......）并且编译良好。

【参考方案1】：

尝试在userPool.signUp() 的回调函数中导航您可以将回调作为参数传递给Aws.register() 函数

//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',
    );
  

【讨论】：

谢谢！在您的示例中， callback() 未定义。另外，我不确定是否可以将视图/组件传递给不同类中的回调函数以在正确的上下文中执行 gotoNext()。

你是否修改了这两个地方，还有 onPress()？我添加了额外的参数

谢谢 看起来在这个改变之后 register() 函数上有某种无限循环，我不太明白。将调试到细节中