Блог

Я новичок в React Native и создаю свое первое приложение (калькулятор).

Я не знаю, как заставить дочерний компонент реагировать на действие onClick в родительских компонентах. В частности, у меня есть компоненты кнопок, которые при нажатии увеличивают их значение на единицу. Затем в главном компоненте приложения у меня есть кнопка сброса, при нажатии которой я хочу установить все значения равными нулю.

Вот мой код:

 import { StatusBar } from 'expo-status-bar';
import React, { Component, useState } from 'react';
import {
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
  SafeAreaView,
  Image,
} from 'react-native';
 
export default function app() {
  return (
    <SafeAreaView SafeAreaView style={styles.container}>
      <View style={styles.result}>
        <Text style={styles.resultText}>Your probability of winning is: </Text>
      </View>
      <View style={styles.buttons}>
        <View style={styles.buttonColumn}>
          <CalcButton icon={require("./assets/peices/queen.png")} />
          <CalcButton icon={require("./assets/peices/rook.png")} />
          <CalcButton icon={require("./assets/peices/knight.png")} />
        </View>
        <View style={styles.buttonColumn}>
          <TouchableOpacity style={styles.resetButton} onPress={() => { /*set all CalcButton component counters to 0*/ }}>
            <Text style={styles.resetButtonText}>Reset</Text>
          </TouchableOpacity>
          <CalcButton icon={require("./assets/peices/bishop.png")} />
          <CalcButton icon={require("./assets/peices/pawn.png")} />
        </View>
      </View>
      <StatusBar style="auto" />
    </SafeAreaView >
  );
}
 
function CalcButton(props) {
  const [peiceCounter, counterIncrement] = useState(0);
 
  return (
    <TouchableOpacity style={styles.peiceButton} onPress={() => counterIncrement(peiceCounter   1)}>
      <Image
        source={props.icon}
        style={styles.peiceIcon}
      />
      <Text style={styles.counterText}>{peiceCounter}</Text>
    </TouchableOpacity >
  )
}
 

Создайте состояние для своей функции приложения

 const [resetCounter, setResetCounter] = useState(false);
 

Передайте resetCounter и setResetCounter всем элементам CalcButton, например

 <CalcButton resetCounter={resetCounter} setResetCounter={setResetCounter} icon={require("./assets/peices/queen.png")} />
 

Теперь нажмите кнопку сброса, чтобы сделать это

 onPress={() => setResetCounter(true)}
 

В функции CalcButton добавьте это перед возвратом

 useEffect(()=>{
  if(props.resetCounter){
     counterIncrement(0)
  }
},[props])
 

Также добавьте эту строку

 onPress={() => {
   props.setResetCounter(false) //new line added
   counterIncrement(peiceCounter   1)
}}
 

 import { StatusBar } from 'expo-status-bar';
import React, { Component, useState } from 'react';
import {
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
  SafeAreaView,
  Image,
} from 'react-native';
 
export default function app() {
    
    
    const [initcalc, setInitCalc] = useState(false);
    const calcInit = () => {
        setInitCalc((prev)=>!prev)
    }

  return (
    <SafeAreaView SafeAreaView style={styles.container}>
      <View style={styles.result}>
        <Text style={styles.resultText}>Your probability of winning is: </Text>
      </View>
      <View style={styles.buttons}>
        <View style={styles.buttonColumn}>
          <CalcButton icon={require("./assets/peices/queen.png")} initcalc={initclac} />
          <CalcButton icon={require("./assets/peices/rook.png")}  initcalc={initclac} />
          <CalcButton icon={require("./assets/peices/knight.png")} initcalc={initclac}  />
        </View>
        <View style={styles.buttonColumn}>
          <TouchableOpacity style={styles.resetButton} onPress={() =>  calcInit() }>
            <Text style={styles.resetButtonText}>Reset</Text>
          </TouchableOpacity>
          <CalcButton icon={require("./assets/peices/bishop.png")} initcalc={initclac} />
          <CalcButton icon={require("./assets/peices/pawn.png")} initcalc={initclac} />
        </View>
      </View>
      <StatusBar style="auto" />
    </SafeAreaView >
  );
}
 
function CalcButton(props) {
  const [peiceCounter, counterIncrement] = useState(0);
  const init = ;
    
React.useEffect(()=>{
    counterIncrement(0);
},[prop.initcalc])
    
  return (
    <TouchableOpacity style={styles.peiceButton} onPress={() => counterIncrement(peiceCounter   1)}>
      <Image
        source={props.icon}
        style={styles.peiceIcon}
      />
      <Text style={styles.counterText}>{peiceCounter}</Text>
    </TouchableOpacity >
  )
}
 

Может быть способ создать функцию для поиска в верхнем компоненте и изменения на 0 в нижнем компоненте при изменении соответствующего значения.