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

[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

[مهدی حسن زاده]

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

[zahra]

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

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

}


[مهدی حسن زاده]

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

[نویسنده]

نوشته‌ها