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
این کد رو دقیقا کپی کنید باید کار کنه خودم تستش کردم مشکلی نداشت
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)})
}
}
با اینجوری عمل کنید
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);
}
}
فقط اگر در تبدیل رشته با عدد ایراد گرفت خودتون تبدیل رو درستش کنید یا اول همه چی رشته باشه موقع محاسبه تبدیل به عدد بشه یا هرجور دیگه ای که جواب بده
@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>
)
}
}
@bahar.rostaminia76 لطف کنید تلگرام پیام بدین ریموت وصل شم چک کنیم ولی اروری که دریافت کردین مربوط به promise هست
این کد رو دقیقا کپی کنید باید کار کنه خودم تستش کردم مشکلی نداشت
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)})
}
}
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟