如何在不使用 class 的情况下从 TextInput（在 expo 中）获取输入并将其存储为要在另一个函数中调用的变量？

Question

我正在开发一个非常简单的提醒应用程序，作为使用 React 和 javascript 的介绍。（我是 javascript 的完全初学者，但有使用 ruby 等语言的经验。）我希望能够从这个 TextInput 组件 (https://docs.expo.io/versions/v37.0.0/react-native/textinput/#content) 获得用户键盘输入，而无需使用一个class。我只想将输入存储为一个变量，并能够在我的代码中的任何其他地方调用它。第二个函数中的 {text} 变量是我要存储第一个函数的输入的地方。（为糟糕的英语道歉）我尝试运行它，它说它找不到变量 'text'，即使那是它被分配给的。

function NewReminderScreen({ navigation }) {
  const [value, onChangeText] = React.useState('click to add reminder.')

  return (
    <View style={styles.container}>
      <TextInput
        style={{height: 40, borderColor: 'white', borderWidth: 0, color:'#595959', fontSize:20, marginHorizontal:5}}
        onChangeText={text => onChangeText(text)}
        value = {value}
      />   
);


}

function HomeScreen({ navigation }) {

  return (
    <View style={styles.container}>
      <Text style={styles.buttontext}>{text}</Text>

      <TouchableOpacity
        onPress={() => navigation.navigate('NewReminderScreen')}
        style={styles.plusbutton}>
        <Text style={styles.buttontext}>+</Text>

      </TouchableOpacity>
    </View>
  );
}

Answer 1

你可以尝试在函数外部声明一个变量，并在触发 onChange prop 内部的函数时为其赋值吗？

  let text = '';

  function NewReminderScreen({ navigation }) {
  const [value, onChangeText] = React.useState('click to add reminder.')

  function textChangeHandler(event){
    onChangeText(event.target.value)
     text = event.target.value;
    }

  return (
    <View style={styles.container}>
      <TextInput
        style={{height: 40, borderColor: 'white', borderWidth: 0, color:'#595959', fontSize:20, marginHorizontal:5}}
        onChange={textChangeHandler}
        value = {value}
      />   
);


}

Answer 2

屏幕 1 你可以制作这样的构造函数

function NewReminderScreen({ navigation }) {
     constructor(props){
          super(props)
          this.state = {
          text: ''

          }
       }
  const [value, onChangeText] = React.useState('click to add reminder.')



 return (
    <View style={styles.container}>
      <TextInput
        style={{height: 40, borderColor: 'white', borderWidth: 0, color:'#595959', fontSize:20, marginHorizontal:5}}
        onChangeText={text => this.setState({text})}
        value = {value}
      />   
);


}

将其放入您的按钮点击功能以导航到您的主屏幕

   this.props.navigation.replace('HomeScreen', { 
     text: this.state.text
  })

屏幕 2

渲染后将其放在主屏幕中

    const text = this.props.route.params.text;

然后把它放在容器中你想要的任何地方

 <Text style={styles.buttontext}>{text}</Text>

如何在不使用 class 的情况下从 TextInput（在 expo 中）获取输入并将其存储为要在另一个函数中调用的变量？

how do you get a input from a TextInput (in expo) and store it as a variable to be recalled in another function without using class?

javascript

react-native

expo

react-native-textinput