آموزش جاوااسکریپت انجمن ها react native ماشین حساب ساده فقط قابلیت جمع

در حال نمایش 5 نوشته (از کل 5)
  • نویسنده
    نوشته‌ها
  • #14846 پاسخ
    zahra
    مشارکت کننده

    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

    #14862 پاسخ

    سلام.
    شما باید برای هر input یک state در نظربگیرید و در رویداد onChangeText این مقدار رو بروزرسانی کنید.سپس یک button قرار بدید که با کلیک بر روی اون جمع این state ها رو درون یک متغیر یا state ذخیره کنه و نمایش بده.برای اینکه کاربر رو ملزم کنید تا فقط عدد وارد کنه یک آموزش متنی(مشخص کردن نوع صفحه کلید) در سایت موجود هست که میتونید ازش کمک بگیرید.

    #14864 پاسخ
    zahra
    مشارکت کننده

    میشه برام پیاده سازی کنید چون مبتدیم می فهمم باید از استیت ها استفاده کرد ولی نمی دونم چجوری
    هی سینتکس ارور می گیرعه بهم

    #14879 پاسخ
    zahra
    مشارکت کننده

    من امدم یکم تغیرش دادم با استفاده سورس کد قبلی که دیده بودم الان نمی دونم چجوری با کلیک کردن دکمه بگم حساب کنه
    برای این که با سینتکس جاوا اسکریپت زیاد اشنایی ندارم از متد سام استفاده کردم برای جمع
    الان چجوری می تونم اینو اصلاح کنم که با زدن Collect در فیلد توتال جمع اعداد را نمایش بدهد


    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>
    )
    }

    }

    #14933 پاسخ

    در تابع onDateChange ای که تعریف کردید.مقدار total و اینجوری حساب کنید
    `this.setState({total:this.state.num1+this.state.num2+this.state.num3})
    پیشنهاد میکنم حتما با جاوا اسکریپت کار کنید و به es6 مسلط بشید.چون در آینده 100درصد به مشکل میخورید

در حال نمایش 5 نوشته (از کل 5)
پاسخ به: ماشین حساب ساده فقط قابلیت جمع
اطلاعات شما: