React Native TextInput保存到const

Question

Summary

I have a react native functional component where I collect a value from the user in TextInput and then need to pass that value to a function when a button is pressed. I know how to do this in a react native class component with state, however I'm trying to use a functional component.

I'm close to figuring it out but I'm just missing something. The code I have so far is below.

saveUserInput handles saves the text from the user and returns input. When I pass saveUserInput into forgotPassword, which is my function that sends userInput to my backend to reset password, saveUserInput is defined as the function as opposed to the value it returns. How can make this work as a functional component?

Code

export default (ForgotPasswordScreen = () => {

  const saveUserInput = userInput => {
    const input = userInput;
    return input;
  };

  return (
    <View style={styles.container}>
      <Text style={styles.headerText}>Forgot Password</Text>
      <Text style={styles.forgotText}>
        Enter your username or email address below to reset your password
      </Text>
      <TextInput
        onChangeText={userInput => saveUserInput(userInput)}
        placeHolder={"username or email"}
      />
      <Text
        style={styles.buttonText}
        onPress={saveUserInput => forgotPassword(saveUserInput)}
      >
        Forgot Password Button
      </Text>
    </View>
  );
});

Answer 1

export default (ForgotPasswordScreen = () => {
  let input = '';
  const saveUserInput = userInput => {
    input = userInput;
  };

  return (
    <View style={styles.container}>
      <Text style={styles.headerText}>Forgot Password</Text>
      <Text style={styles.forgotText}>
        Enter your username or email address below to reset your password
      </Text>
      <TextInput
        onChangeText={userInput => saveUserInput(userInput)}
        placeHolder={"username or email"}
      />
      <Text
        style={styles.buttonText}
        onPress={() => forgotPassword(input)}
      >
        Forgot Password Button
      </Text>
    </View>
  );
});

This should do the trick without using hooks. Pull out the input variable to be in scope for all other components to use. But life could be much easier using useState hooks.