Не могу передать значение между двумя компонентами в реагировать родной - PullRequest
Новая
       62

Не могу передать значение между двумя компонентами в реагировать родной

0 голосов
/ 01 мая 2020

Итак, я следую учебному пособию Academind на youtube о реагировании на нативном языке, но мне кажется, что я не могу заставить работать передачу значений между компонентами tow. В стартовом игровом экране в этой строке onPress={()=>props.onGame(selNumber)} я, кажется, следую за ним и передаю selNumber, но я получаю ошибку: onGame не является функцией и не определена, а в приложении. js 

const gameHandler=(selNum)=>{
    setUserNumber(selNum);
};


let content=<StartGameScreen onGame={gameHandler} />;

Здесь я, кажется, точно следуйте за ним и передайте хэндлхендера, но я все еще не понимаю, что пошло не так Пожалуйста, помогите мне, я пытался отладить этот код некоторое время сейчас.

StartGameScreen.js

import React, {useState} from 'react';
import { View, StyleSheet, Alert ,Text, Button, TouchableWithoutFeedback,Keyboard} from 'react-native';
import NumberComponents from '../components/NumberComponent';
import Card from '../components/Card';
import Colors from '../constants/colors';
import Input from '../components/Input';

const StartGameScreen = props => {
   const [enteredValue,setEnteredValue]=useState('');
   const [confirmed,setConfirmed]=useState(false);
   const [selNumber,setSelNumber]=useState('');
   const numberHandler =textinput=>{
      setEnteredValue(textinput.replace(/[^0-9]/g,''));
   };

   let confirmedOutput;
   if(confirmed){
      confirmedOutput=<Card style={styles.confirm}>
         <Text>You Selected:</Text>   
         <NumberComponents children={selNumber}/>  
         <Button title='Start Game' onPress={()=>props.onGame(selNumber)}/>                    
      </Card>
   }

   const resetInputHandler=()=>{
      setEnteredValue('');
      setConfirmed(false);
   };
   const confirmButtonHandler=()=>{
      const chosenNum=parseInt(enteredValue);
      if(isNaN(chosenNum)  || chosenNum<=0 || chosenNum>99){
         Alert.alert(
            'InValid Number',
            'Please Enter Valid Number Between 1 and 99',
            [{text:'Okay',style:'destructive',onPress:resetInputHandler}]
         )
         return;
      }
      setConfirmed(true);
      setEnteredValue('');
      setSelNumber(chosenNum);
      Keyboard.dismiss();
   };
   return (
      <TouchableWithoutFeedback onPress={()=>{Keyboard.dismiss();}}>
      <View style={styles.screen}>
         <Text style={styles.title}> Start A New Game </Text>
         <Card style={styles.inputContainer}>
            <Text style={{ color: 'green', fontSize: 15 }}>Choose A Number</Text>
            <Input 
               keyboardType='number-pad' 
               maxLength={2} 
               style={styles.input} 
               blurOnSubmit
               onChangeText={numberHandler}
               value={enteredValue} 
            />
            <View style={styles.buttonContainer}>
               <View style={styles.button}>
                  <Button 
                     title='Reset'
                     color={Colors.accent}
                     onPress={resetInputHandler} />
               </View>
               <View style={styles.button}>
                  <Button 
                     title='Confirm'
                     onPress={confirmButtonHandler}
                     color='orange' />
               </View>
            </View>
         </Card>
         {confirmedOutput}
      </View>
   </TouchableWithoutFeedback>
);
};

в приложении. js

import React,{ useState }  from 'react';
import { StyleSheet, View } from 'react-native';
import Header from './components/Header';
import StartGameScreen from './screens/StartGameScreen';
import GameScreen from './screens/StartGameScreen';




export default function App() {
  const [userNumber,setUserNumber]=useState();

const gameHandler=(selNum)=>{
    setUserNumber(selNum);
  };


  let content=<StartGameScreen onGame={gameHandler} />;

  if(userNumber){
    content=<GameScreen userChoice={userNumber}/>;
  }
  return (
    <View style={styles.screen}>
      <Header title="Guess A Number"/>     
       {content}      
    </View>
  );
}

const styles = StyleSheet.create({
  screen:{
    flex:1,    
  }
});

Ответы [ 2 ]

1 голос
/ 01 мая 2020

Вам необходимо добавить onGame = {gameHandler} в этот компонент: 

if (userNumber) {
  content = <GameScreen onGame={gameHandler} userChoice={userNumber} />;
}

Поскольку GameScreen и StartGameScreen являются одинаковыми компонентами, 

import StartGameScreen from './screens/StartGameScreen';
import GameScreen from './screens/StartGameScreen';

во втором случае, когда userNumber равен не ложь, компонент GameScreen был вызван без реквизитов onGame.

См. рабочую урезанную версию в codeandbox:

https://codesandbox.io/s/affectionate-wright-3bccd

0 голосов
/ 01 мая 2020

Здравствуйте, если между вашими компонентами нет родительско-дочерних отношений, вы можете использовать Event, например DeviceEventEmitter.

Вот хорошая ссылка, например: [https://callstack.com/blog/sending-events-to-javascript-from-your-native-module-in-react-native/] [1]

...