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

【问题标题】：Pass event handler as props to react-native custom component将事件处理程序作为 props 传递给 react-native 自定义组件
【发布时间】：2019-06-07 22:35:48
【问题描述】：

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

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

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

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

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

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,
              ................
              ................

如果我如下更改 MyButton 组件的 onPress 属性以传递 args....我会收到错误，因为它在用户按下按钮之前就登录了

<MyButton
    extraStyle={{ backgroundColor: '#03A9F4' }}
    onPress={this.signUpUser(
      this.state.userName,
      this.state.email,
      this.state.password,
    )}
  >
    SIGN UP
  </MyButton>

有人可以帮忙吗？我整晚都被这个lol熬夜了

【问题讨论】：

你试过使用匿名函数吗？ onPress={() => this.callYourFunction(...)}

标签： reactjs react-native

【解决方案1】：

尝试改变

onPress={this.signUpUser(blabla)}

到

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

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

【讨论】：

哈哈哈，没问题。