Реагировать Родной |Почему моя функция работает сразу, а не только на onPress? - PullRequest
Новая
       64

Реагировать Родной |Почему моя функция работает сразу, а не только на onPress?

0 голосов
/ 17 октября 2019

Я только начинаю понимать реквизит в реагировать нативно, поэтому я надеюсь, что это простое решение.

Я хочу, чтобы состояние формы обновлялось, чтобы пользователь мог перейти на следующую страницу в форме, и я также хочу, чтобы состояние ответа также обновлялось - как при нажатии пользователем компонента кнопки (onPress). ,

Однако, когда я вижу console.log, я вижу, что функция состояния обновления запускается сразу, а не при нажатии кнопки - поэтому она переходит непосредственно ко второй «странице» формы,

Компонент формы 

import React, {useState} from 'react';
import { View, Text} from 'react-native';
import Happiness from './Happiness';

const StarterForm = () => {
    const [formStage, setFormStage] = useState(1)
    const [happinessLevel, setHappinessLevel] = useState('')

  console.log(formStage)
  console.log(happinessLevel)

  const increaseTheStage = (happiness) => {
      setHappinessLevel(happiness)
      setFormStage(formStage +1)
  }

  switch (formStage) {
    case 1:
      return (
        <Happiness 
        passHappiness={increaseTheStage}
        />
      )
    case 2: 
        return (
          <Text>This is the case of two</Text>
        )
  }
}

export default StarterForm;

Компонент счастья 

import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';

const Happiness = (props) => {
  return (
    <View>
            <Text>Which of the following best classifies your happiness?</Text>
            <TouchableOpacity onPress={props.passHappiness('Excellent')}>
              <Text>Excellent</Text>
            </TouchableOpacity>
        </View>
  )
}


export default Happiness;

Ожидаемые результаты

Ожидается следующее при открытии первого экрана: 

console.log(formStage) = "1" 
console.log(happinessLevel) = ""

1 Ответ

2 голосов
/ 17 октября 2019

Использование анонимных функций

Вы вызываете функцию сразу, переключите ее на это: 

<TouchableOpacity onPress={() => props.passHappiness('Excellent')}>

Теперь вы создали анонимную функцию, которая вызывает passHappiness с параметром 'Превосходный », показанный ниже: 

() => props.passHappiness('Excellent')

Использование связывания

Вы также можете использовать метод связывания, чтобы« связать »параметр« отлично »с функцией 

<TouchableOpacity onPress={props.passHappiness.bind(this,'Excellent')}>

Подробнее о методе связывания здесь .

...