将事件处理程序作为props传递给react-native自定义组件

时间:2019-01-13 20:44:56

标签: reactjs react-native

我有一个名为MyButton.js的自定义组件

byfn.sh up

我通过父SignUp.js的道具传递按钮的onPress处理程序

  <View style={{ alignItems: 'center', width: '100%' }}>
    <TouchableOpacity
      style={[styles.button, props.extraStyle]}
      onPress={props.onPress}
    >
      <Text style={styles.buttonText}>{props.children}</Text>
    </TouchableOpacity>
  </View>
);

问题是我的signUpUser函数(也在SignUp.js中)需要传递3个参数

  <MyButton
    extraStyle={{ backgroundColor: '#03A9F4' }}
    onPress={this.signUpUser}
  >
    SIGN UP
  </MyButton>

如果我如下更改MyButton组件的onPress属性以传递args...。我得到的错误是它在用户甚至没有按下按钮之前就将用户登录了

signUpUser = (userName, email, password) => {
    try {
      //handle password<6 and bad email format etc pls!!!!
      Firebase.auth()
        .createUserWithEmailAndPassword(email, password)
        .then((user) => {
          console.log('User created in firebase', user);
          //update FB with userNameNode......and default values for profile
          Firebase.database()
            .ref('profiles/users/' + user.user.uid)
            .set({
              active: false,
              emailAddress: email,
              userName: userName,
              userId: user.user.uid,
              ................
              ................

有人可以帮忙吗?我已经整夜都在跟这个哈哈

1 个答案:

答案 0 :(得分:2)

尝试更改

  

onPress = {this.signUpUser(blabla)}

  

onPress = {()=> this.signUpUser(blabla)}

这里有一个类似的帖子, React Native onPress being called automatically