آموزش جاوااسکریپت › انجمن ها › react native › ماشین حساب ساده فقط قابلیت جمع
- این موضوع 4 پاسخ، 2 کاربر را دارد و آخرین بار در 4 سال، 11 ماه پیش بدست مهدی حسن زاده بهروزرسانی شده است.
-
نویسندهنوشتهها
-
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درصد به مشکل میخورید -
نویسندهنوشتهها