Question

摘要

我有一个react native函数组件，该组件在TextInput中从用户那里收集值，然后在按下按钮时将该值传递给函数。我知道如何在带有状态的React Native类组件中执行此操作，但是我正在尝试使用功能组件。

我即将找出答案，但我只是想念一些东西。我到目前为止的代码如下。

saveUserInput句柄保存用户的文本并返回输入。当我将saveUserInput传递到forgotPassword时，这是我将userInput发送到后端以重置密码的函数，将saveUserInput定义为该函数，而不是返回的值。如何使它作为功能组件起作用？

代码

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>
  );
});

这应该在不使用钩子的情况下完成。拉出输入变量，以使其包含在所有其他组件中。但是使用useState挂钩可以使生活更加轻松。

React Native TextInput保存到const

1 个答案: