Question

您好，我目前仍在使用简单的计算器工作，并且已经获得了执行计算或功能/事件的这套代码

export default class App extends Component {
constructor(props){
    super(props);
    this.state = {
        firstInput: '',
        secondInput: '',
        sum: 0,
        difference: 0,
        product: 0,
        quotient: 0,
        result: 0,
    };
}


//CALCULATIONS FORMULA

calculateSum = () => {
    const { firstInput, secondInput } = this.state;

    this.setState({
        sum: Number(firstInput) + Number(secondInput)
    });
}

calculateDifference = () => {
    const { firstInput, secondInput } = this.state;

    this.setState({
        difference: Number(firstInput) + Number(secondInput)
    });
}

calculateProduct = () => {
    const { firstInput, secondInput } = this.state;

    this.setState({
        product: Number(firstInput) + Number(secondInput)
    });
}

calculateQuotient = () => {
    const { firstInput, secondInput } = this.state;

    this.setState({
        quotient: Number(firstInput) + Number(secondInput)
    });
}



//stores input from user
storeFirstInput = (number1) => {
    this.setState({firstInput: number1})
}

storeSecondInput = (number2) => {
    this.setState({secondInput: number2})
}

这是我要根据按下的按钮更改的文本

<View style={styles.answerContainer}>
                {/****** ANSWER HOVERING TEXT ******/}
                <Text 
                style = {{
                fontWeight: 'bold',
                fontSize: 30,
                color: '#242582',

                }}> 
                ANSWER: 
                </Text>

                {/****** RESULT OF USER INPUT ******/}
                <Text 
                style={styles.answerText}

                > 
                {this.state.sum}
                </Text>

            </View>

我有4个按钮，分别是+，-，*和/（总和，差，乘积和商）

<View style={styles.buttonContainer}>
                {/****** ADD BUTTON CONTAINER ******/}
                <View Style={styles.addButtonContainer}>
                        <TouchableOpacity Style={styles.addButtonDesign} 
                        onPress={this.calculateSum}
                        >
                                <Text style ={styles.buttonText}> + </Text>
                        </TouchableOpacity>
                </View>

                {/****** SUBTRACT BUTTON CONTAINER ******/}
                <View Style={styles.subtractButtonContainer}>
                        <TouchableOpacity Style={styles.subButtonDesign}
                        onPress={this.calculateDifference}
                        >
                                <Text style ={styles.buttonText}> - </Text>
                        </TouchableOpacity>
                </View>

                {/****** MULTIPLY BUTTON CONTAINER ******/}
                <View Style={styles.multiplyButtonContainer}>
                        <TouchableOpacity Style={styles.mulButtonDesign}
                        onPress={this.calculateProduct}
                        >
                                <Text style ={styles.buttonText}> * </Text>
                        </TouchableOpacity>
                </View>

                {/****** DIVIDE BUTTON CONTAINER ******/}
                <View Style={styles.divideButtonContainer}>
                        <TouchableOpacity Style={styles.divButtonDesign}
                        onPress={this.calculateQuotient}
                        >
                            <Text style ={styles.buttonText}> ÷ </Text>
                        </TouchableOpacity>
                </View>

这就是问题所在！每当我按下-，*或/按钮时，它不会显示正确的公式，而总是显示总和。有什么方法可以在IF按钮被按下的代码中的某处做IF语句-它会放在我的代码文本部分的{this.state.difference}中吗？任何帮助将不胜感激！

Answer 1

经过一段时间的研究，我得到了答案，看来错误完全是我自己的意思。我将之前的代码更改为此

calculateQuotient = () => {
    const { firstInput, secondInput, result } = this.state;

    this.setState({
        result: Number(firstInput) / Number(secondInput),

    });
}

和文本结果

{this.state.result}

它现在存储我按下的按钮的值

React-Native-Android：按下一个按钮，该按钮将根据按下的按钮来更改文本

1 个答案: