Как вы получаете входные данные из TextInput (в expo) и сохраняете его как переменную для вызова в другой функции без использования класса? - PullRequest
Новая
       33

Как вы получаете входные данные из TextInput (в expo) и сохраняете его как переменную для вызова в другой функции без использования класса?

0 голосов
/ 07 апреля 2020

Я работаю над очень простым приложением для напоминаний в качестве введения в использование activ и javascript. (Я начинающий в javascript, но у меня есть опыт работы с такими языками, как ruby.) Я хочу иметь возможность получать ввод с клавиатуры пользователя из этого компонента TextInput (https://docs.expo.io/versions/v37.0.0/react-native/textinput/#content) без использования класс. Я просто хочу сохранить входные данные как переменную и иметь возможность вызывать их где-нибудь еще в моем коде. Переменная {text} во второй функции - это место, где я хочу сохранить входные данные из первой функции. (извиняюсь за плохой английский sh) я пытаюсь запустить его, и он говорит, что не может найти переменную '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>
  );
}

Ответы [ 2 ]

0 голосов
/ 07 апреля 2020

ЭКРАН 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
  })

SCREEN 2

И поместите это после рендера на вашем домашнем экране 

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

И поместите это где угодно в вашем содержании 

 <Text style={styles.buttontext}>{text}</Text>
0 голосов
/ 07 апреля 2020

Можете ли вы попытаться объявить переменную вне функции и присвоить ей значение при запуске функции из свойства onChange? 

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


}
...