0

Имею небольшое приложение по типу калькулятора в JavaScript React-Native. Проблемма в том, что при нажатии на кнопку Tax, результат выдает значение NaN. Задача кнопки Tax состоит в том, что при ее нажатии, к результату умножения, деления, сложения или вычитания прибавляется 12%. В чем моя ошибка, подскажите пожалуйста?

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

export default class Counter extends React.Component {

state = {
    num: 0,
}

inp1 = 0;
inp2 = 0;

handleSubtract = () => {
    this.setState({
        num:this.inp1-this.inp2
    })
}

handleAdd = () => {
    this.setState({
        num: this.inp1 + this.inp2
    })
}

handleDivide = () => {
    this.setState({
        num: this.inp1 / this.inp2
    })
}

handleMultiply = () => {
    this.setState({
        num: this.inp1 * this.inp2
    })
}

handleTax = () => {

    // var newNum = this.num / 100 * 12;

    this.setState({
        // num: newNum
        num: this.num / 100 * 12
    })
}

handleNum1 = (text) => {
    this.inp1 = parseInt(text);
}

handleNum2 = (text) => {
    this.inp2 = parseInt(text);
}

render() {
    return (
        <View style={styles.flexBox}>
            <Text style={styles.flexTitle}>Hi, welcome to my app!</Text>
            <View style={styles.inpBox}>
                <TextInput
                    style={[styles.inps, {marginRight: 10}]}
                    placeholder="Num1"
                    keyboardType="phone-pad"
                    onChangeText={this.handleNum1}
                />
                <TextInput
                    style={styles.inps}
                    placeholder="Num2"
                    keyboardType="phone-pad"
                    onChangeText={this.handleNum2}
                />
            </View>
            <View style={styles.butBox}>
                <View style={styles.button}>
                    <Button
                        onPress={this.handleSubtract}
                        title="Subtract"
                    />
                </View>
                <View style={styles.button}>
                    <Button
                        onPress={this.handleAdd}
                        title="Add"
                    />
                </View>
                <View style={styles.button}>
                    <Button
                        onPress={this.handleMultiply}
                        title="Multiply"
                    />
                </View>
                <View style={styles.button}>
                    <Button
                        onPress={this.handleDivide}
                        title="Divide"
                    />
                </View>
                <View style={[styles.button, {height: 65, width: 65}]}>
                    <Button
                        onPress={this.handleTax}
                        title="Tax"
                        color="#f00"
                    />
                </View>
            </View>
            <Text style={styles.numBox}>
                {this.state.num}
            </Text>
        </View>
    );
}
}

const styles = StyleSheet.create({
flexBox: {
    flex: 1,
    flexDirection: "column",
    justifyContent: "center",
    alignItems: "center",
},

flexTitle: {
    padding: 10,
},

inpBox: {
    flexDirection: "row",
},

inps: {
    width: "20%",
    height: 50,
    alignItems: "center",
    textAlign: 'center'
},

butBox: {
    flexDirection: "row",
    width: "100%",
    alignItems: "center",
},

button: {
    width: "20%",
    height: 50,
},

numBox: {
    padding: 20,
    fontSize: 32,
}
});

2
  • Скорее всего потому что this.num у вас undefined. Попробуйте this.state.num. 14 сен 2018 в 5:17
  • Спасибо! Работает!
    – Arina
    14 сен 2018 в 5:23

1 ответ 1

2

Скорее всего потому что this.num у вас undefined.

В функции:

handleTax = () => {

    // var newNum = this.num / 100 * 12;

    this.setState({
        // num: newNum
        num: this.num / 100 * 12
    })
}

Попробуйте this.state.num.

А именно:

handleTax = () => {

    // var newNum = this.num / 100 * 12;

    this.setState({
        // num: newNum
        num: this.state.num / 100 * 12
    })
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.