آفلاین
user-avatar

ماشین حساب ساده فقط قابلیت جمع

2 سال پیش
توسط zahra آپدیت شد
آفلاین
user-avatar
zahra ( 1149 تجربه )
2 سال پیش
import React, { Component } from 'react';
import {View}from 'react-native';
import {Input,Item,Form,Label ,Button,Text}from 'native-base';
export default class calculatorAdvanced extends Component{
  render(){
    return(
      <View >
      <Form>

      <Item inlineLable >
      <Label>number 1</Label>
      <Input/>
      </Item>

      <Item inlineLable>
      <Label>number 2</Label>
      <Input/>
      </Item>

      <Item inlineLable>
      <Label>number 3 </Label>
      <Input/>
      </Item>

      <Button>
      <Text>Collect</Text>
      </Button>

      <Item inlineLable>
      <Label>total:</Label>
      <Input/>
      </Item>

      </Form>
      </View>
    )
  }
}

من می خواهم کاربر با پر کردن فیلدها در اخر جمع ان را بهم بدعه
با قابلیت این که بعضی از فیلدها خای باشه مثلا اینپوت 1 و 3 را عددگذاری کنه
چطور می تونم این را پیاده سازی کنم در واقع یک ماشین حساب ساده است که فقط جمع می کند
ممنون میشم راهنماییم کنید
http://uupload.ir/files/fae3_10.jpg

بهترین پاسخ انتخاب شده توسط zahra
آفلاین
user-avatar
محمد توانگر
2 سال پیش

این کد رو دقیقا کپی کنید باید کار کنه خودم تستش کردم مشکلی نداشت

import React, {Component} from 'react';
import {View, Input, Item, Form, Label, Button, Text} from 'native-base';

export default class CalculatorAdvanced extends Component {

    constructor(props) {
        super(props);

        this.state = {
            num1: '',
            num2: '',
            num3: '',
            total: 0,
        }
    }

    render() {
        return (
            <View>
                <Form>

                    <Item inlineLable>
                        <Label>number 1</Label>
                        <Input
                            value={this.state.num1}
                            onChangeText={(text) => this.setState({num1: text})}/>
                    </Item>

                    <Item inlineLable>
                        <Label>number 2</Label>
                        <Input
                            value={this.state.num2}
                            onChangeText={(text) => this.setState({num2: text})}/>
                    </Item>

                    <Item inlineLable>
                        <Label>number 3 </Label>
                        <Input
                            value={this.state.num3}
                            onChangeText={(text) => this.setState({num3: text})}/>
                    </Item>

                    <Button onPress={this.calc.bind(this)}>
                        <Text>Collect</Text>
                    </Button>

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

                </Form>
            </View>
        )
    }

    calc() {
        let {num1, num2, num3} = this.state;

        this.setState({total: parseInt(num1) + parseInt(num2) + parseInt(num3)})
    }

}
آفلاین
user-avatar
محمد توانگر ( 2259 تجربه )
2 سال پیش
تخصص : برنامه نویس موبایل و وب

با اینجوری عمل کنید

import React, {Component} from 'react';
import {View} from 'react-native';
import {Input, Item, Form, Label, Button, Text} from 'native-base';

export default class calculatorAdvanced extends Component {

    constructor(props) {
        super(props);

        this.state = {
            num1: 0,
            num2: 0,
            num3: 0
        }
    }

    render() {
        return (
            <View>
                <Form>

                    <Item inlineLable>
                        <Label>number 1</Label>
                        <Input
                            value={this.state.num1}
                            onChangeText={(text) => this.setState({num1: parseInt(text)})}/>
                    </Item>

                    <Item inlineLable>
                        <Label>number 2</Label>
                        <Input
                            value={this.state.num2}
                            onChangeText={(text) => this.setState({num1: parseInt(text)})}/>
                    </Item>

                    <Item inlineLable>
                        <Label>number 3 </Label>
                        <Input
                            value={this.state.num3}
                            onChangeText={(text) => this.setState({num1: parseInt(text)})}/>
                    </Item>

                    <Button onPress={() => this.calc()}>
                        <Text>Collect</Text>
                    </Button>

                    <Item inlineLable>
                        <Label>total:</Label>
                        <Input/>
                    </Item>

                </Form>
            </View>
        )
    }

    calc() {
        let {num1, num2, num3} = this.state;

        console.log(num1 + num2 + num3);
    }
}

فقط اگر در تبدیل رشته با عدد ایراد گرفت خودتون تبدیل رو درستش کنید یا اول همه چی رشته باشه موقع محاسبه تبدیل به عدد بشه یا هرجور دیگه ای که جواب بده

آفلاین
user-avatar
zahra ( 1149 تجربه )
2 سال پیش

@md.tavangar
مرسی از پاسخگوییتون ولی من مبتدیم اینم که شما نوشتیم هیچ عکس العملی نشون نمیده وقتی می خوام لاگ ببینم
شبیه سازم سفید میشه
http://uupload.ir/files/jxno_11.jpg
من امدم یکم تغیرش دادم با استفاده سورس کد قبلی که دیده بودم الان نمی دونم چجوری با کلیک کردن دکمه بگم حساب کنه
برای این که با سینتکس جاوا اسکریپت زیاد اشنایی ندارم از متد سام استفاده کردم برای جمع
الان چجوری می تونم اینو اصلاح کنم چون این جوری به لاگ نیازی نیست که هنگ کنه و در فیلد توتال نمایش میدهه

import React, {Component} from 'react';
import {View} from 'react-native';
import {Input, Item, Form, Label, Button, Text} from 'native-base';

export default class calculatorAdvanced extends Component {

    constructor(props) {
        super(props);

        this.state = {
            num1: 0,
            num2: 0,
            num3: 0,
            total:0,
        }
    }
    onDateChange(date) {
      this.setState({
        total: date,
      });
    }
    render() {
      const { total } = this.state;
      const startDate = total ? total.sum(num1 , num2 , num3) :'' ;
        return (
            <View>
                <Form>

                    <Item inlineLable>
                        <Label>number 1</Label>
                        <Input
                            value={this.state.num1}
                            onChangeText={(text) => this.setState({num1: parseInt(text)})}/>
                    </Item>

                    <Item inlineLable>
                        <Label>number 2</Label>
                        <Input
                            value={this.state.num2}
                            onChangeText={(text) => this.setState({num1: parseInt(text)})}/>
                    </Item>

                    <Item inlineLable>
                        <Label>number 3 </Label>
                        <Input
                            value={this.state.num3}
                            onChangeText={(text) => this.setState({num1: parseInt(text)})}/>
                    </Item>

                    <Button onPress={onDateChange()}>
                        <Text>Collect</Text>
                    </Button>

                    <Item inlineLable>
                        <Label>totals:{ startDate }</Label>
                        <Input/>
                    </Item>

                </Form>
            </View>
        )
    }

}
آفلاین
user-avatar
محمد توانگر ( 2259 تجربه )
2 سال پیش
تخصص : برنامه نویس موبایل و وب

@bahar.rostaminia76 لطف کنید تلگرام پیام بدین ریموت وصل شم چک کنیم ولی اروری که دریافت کردین مربوط به promise هست

آفلاین
user-avatar
zahra ( 1149 تجربه )
2 سال پیش

@md.tavangar
نمیشه اینجا بهم بگید؟
و این که کد خودم مشکلش توی چیه؟

آفلاین
user-avatar
محمد توانگر ( 2259 تجربه )
2 سال پیش
تخصص : برنامه نویس موبایل و وب

این کد رو دقیقا کپی کنید باید کار کنه خودم تستش کردم مشکلی نداشت

import React, {Component} from 'react';
import {View, Input, Item, Form, Label, Button, Text} from 'native-base';

export default class CalculatorAdvanced extends Component {

    constructor(props) {
        super(props);

        this.state = {
            num1: '',
            num2: '',
            num3: '',
            total: 0,
        }
    }

    render() {
        return (
            <View>
                <Form>

                    <Item inlineLable>
                        <Label>number 1</Label>
                        <Input
                            value={this.state.num1}
                            onChangeText={(text) => this.setState({num1: text})}/>
                    </Item>

                    <Item inlineLable>
                        <Label>number 2</Label>
                        <Input
                            value={this.state.num2}
                            onChangeText={(text) => this.setState({num2: text})}/>
                    </Item>

                    <Item inlineLable>
                        <Label>number 3 </Label>
                        <Input
                            value={this.state.num3}
                            onChangeText={(text) => this.setState({num3: text})}/>
                    </Item>

                    <Button onPress={this.calc.bind(this)}>
                        <Text>Collect</Text>
                    </Button>

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

                </Form>
            </View>
        )
    }

    calc() {
        let {num1, num2, num3} = this.state;

        this.setState({total: parseInt(num1) + parseInt(num2) + parseInt(num3)})
    }

}
آفلاین
user-avatar
zahra ( 1149 تجربه )
2 سال پیش

بله به درستی کار کرد مرسی

برای ارسال پاسخ باید وارد سایت شوید