在本機反應中正確使用回調 function

Question

免責聲明：javascripting 和 react-native 的新手 :)

我正在嘗試一個非常簡單的應用程序來反應本機。 用戶會看到一個屏幕，其中給出了兩個數字和一個運算符（如 +、- 等），用戶將在提供的文本字段中輸入結果。 如下圖所示

為了方便應用程序，我有兩個主要類：

1）父 Class （基本上生成數字，作為道具傳遞給孩子，在回調 function 中獲取結果，如果結果正確，則再次重新生成數字）

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  View,
  Text,
  Button
} from 'react-native';

import BasicBox from '../components/BasicBox';


export default class example extends Component {

  constructor() {
    super();
    this.state = {
      result: 0
    };
    this.generate()
  }

  getResponse(result){
    let text=""
    for (var i = 0; i < result.length; i++) {
      text += result[i];
    }
    console.log(result)
    if (this.expected_result === parseInt(text))
    {
      this.generate()
    }
    this.setState({result:parseInt(text)})
  }

  generate() {
    this.length = 3
    this.number_1 = Math.floor(Math.random() * 1000)
    this.number_2 = Math.floor(Math.random() * 1000)
    this.result_box_count =  this.length + 1
    this.operator="+"
    this.expected_result = eval (this.number_1 + this.operator + this.number_2)

    console.log(this.number_1)
    console.log(this.number_2)
    console.log(this.expected_result)
    // this.setState({result:this.expected_result})
  }

  render() {
    //this.generate();

    return (
      <View>
        <BasicBox 
          number_1={this.number_1} 
          number_2={this.number_2} 
          operator={this.operator}
          result_box_count={this.result_box_count}
          get_result = {this.getResponse.bind(this)}
        />

        <Text>
          {console.log(this.expected_result)}
          {console.log(this.state.result)}
          {this.state.result===this.expected_result ? "": "Oh Boy!" }
        </Text>
      </View>
    );
  }
}

2）子 class （它從父生成的數字，並將結果返回給父，按下按鈕）

import React, { Component } from 'react';
import {Text, TextInput, Image, View, StyleSheet, Button} from "react-native"


export default class BasicBox extends Component {
    constructor() {
        super();
        this.state = {
            result: ["","","",""]
        };
    }

    render(){
        return (<View>
            <View style={styles.main}>
                <View>
                    <View style={styles.operand}>
                        <Text style={styles.digit}>{Math.floor(this.props.number_1/100)}</Text>
                        <Text style={styles.digit}>{Math.floor(this.props.number_1/10%10)}</Text>
                        <Text style={styles.digit}>{this.props.number_1%10}</Text>
                    </View>
                    <View style={styles.operand}>
                        <Text style={styles.digit}>{Math.floor(this.props.number_2/100)}
                        </Text>
                        <Text style={styles.digit}>{Math.floor(this.props.number_2/10%10)}</Text>
                        <Text style={styles.digit}>{this.props.number_2%10}</Text>
                    </View>
                    <View style={styles.operand}>
                        <View>
                            <Text style={styles.digit_hidden} >1</Text>
                            <TextInput style={styles.digit_answer} 
                                    keyboardType='numeric' 
                                    maxLength={1}
                                    onChangeText={(txt)=>{
                                        result=this.state.result;
                                        result[0]=txt
                                        this.setState({result:result})
                                    }}
                                    >

                            </TextInput>
                        </View>
                        <View>
                            <Text style={styles.digit_hidden}>1</Text>
                            <TextInput style={styles.digit_answer} 
                                    keyboardType='numeric' 
                                    maxLength={1}
                                    onChangeText={(txt)=>{
                                        result=this.state.result;
                                        result[1]=txt
                                        this.setState({result:result})
                                    }
                                    }

                                >

                            </TextInput>
                        </View>
                        <View>
                            <Text style={styles.digit_hidden}>1</Text>
                            <TextInput style={styles.digit_answer} 
                                    keyboardType='numeric' 
                                    maxLength={1}
                                    onChangeText={(txt)=>{
                                        result=this.state.result;
                                        result[2]=txt,
                                        this.setState({result:result})
                                    }}
                                    ></TextInput>
                        </View>
                        <View>
                            <Text style={styles.digit_hidden}>1</Text>
                            <TextInput style={styles.digit_answer} 
                                    keyboardType='numeric' maxLength={1}
                                    onChangeText={(txt)=>{
                                        result=this.state.result;
                                        result[3]=txt,
                                        this.setState({result:result})
                                    }}
                            ></TextInput>
                        </View>
                    </View>

                </View>
                <View>
                    <Text style={styles.digit}>{this.props.operator}</Text>
                </View>
            </View>

            <Button onPress={()=>{this.props.get_result(this.state.result)}}
                title="Check Result"
            />
        </View>) 
    }
}


const styles = StyleSheet.create ({
    main: {
        flexDirection:"row",
        // borderWidth:1,
        // flex: 1,
        justifyContent: "center",
        // alignItems: "center"
    },
    digit: {
        fontSize: 80,
        // borderWidth:1,
        //adjustsFontSizeToFit
    },
    digit_hidden: {
        fontSize: 80,
        // borderWidth:1,
        flex:1,


        // color: `rgb(255,255,255)`
    },
    operand: {
        flexDirection:"row",
        justifyContent:"flex-end",
        // alignItems:"flex-end",
        // borderWidth:1,
    },
    digit_answer: {
        // alignItems:"baseline",
        // flexDirection:"row",
        // justifyContent:"flex-end",

        // backgroundColor: `rgb(255,255,255)`,

        // alignItems:"flex-end",
        fontSize: 80,
        // backgroundColor: gray`rgb(255,255,255)`,
        backgroundColor:'gray',
        borderWidth:1,
    },
});

感謝您到目前為止的閱讀：）

在我的 class 定義中，按鈕在我的孩子 class 中，因為我想在 OnPress 中將結果發送給父級。 對於 UI 我的問題是：

1) 最重要的是，如何將按鈕移動到我的父級 class 並以某種方式從子級 class 將結果返回給我的父級？

2) 重新生成數字時，我的 < BasicBox> 中的 TextInput 字段不會被清除。 這里有什么問題？

Answer 1

當父組件值發生變化時，您需要在子組件中使用UNSAFE_componentWillReceive方法