반응 네이티브를 사용하여 두 값을 더하고 결과를 표시합니다.

-1

두 개의 숫자를 추가하기 위해 반응 네이티브를 사용하여 간단한 계산기를 개발하고 있습니다. 변수에 값을 저장하고 TextInput을 사용하여 값을 표시하려면 어떻게해야합니까? 그리고 이러한 변수를 추가하는 방법은 무엇입니까? 당신이 당신의 상태를 저장해야 각 TextInput를 들어반응 네이티브를 사용하여 두 값을 더하고 결과를 표시합니다.

출처

2017-01-10 Anonymous

render() { 
    return (
     <View> 
      <TextInput /> 
      <TextInput /> 
     </View> 
    ); 
}

출처

2017-03-30 11:34:52 Prasanna

는

class Calc extends React.Component { 

    constructor(props){ 
     super(props); 
     this.state = { f1: null, f2: null, result: null }; 
    } 

    render() { 
     const result = f1 && f2 ? f1 + f2 : null; 
     return (
      <TextInput onChangeText={(text) => this.setState({f1: parseInt(text)})}/> 
      <TextInput onChangeText={(text) => this.setState({f2: parseInt(text)})}/> 

      { result ? <Text>{result}</Text> : null } 
     ); 
    } 
}

중요한 것은이 변화 할 때마다 상태를 설정하는 onChangeText입니다. 또한 keyboardType='numeric'을 사용하여 숫자 키보드를 표시 할 수 있습니다.

출처

2017-01-10 10:02:20 Eldelshell

감사합니다. 그러나 첫 번째 textInput이 닫힐 때 오류가 발생합니다. "Adjecent jsx 요소는"위의 코드에서 " –

을 묶는 태그로 묶어야합니다. 변수를 찾을 수 없습니다. 어떻게 결과를 얻을 수 있습니까? –

표시되는 오류는 렌더링 함수가 여러 요소가 아닌 하나의 요소 만 반환해야하기 때문입니다. 따라서 가장 쉬운 방법은보기로 래핑하는 것입니다.

render() { 
    return (
     <View> 
      <TextInput /> 
      <TextInput /> 
     </View> 
    ); 
}

빠른 개요 외에도 코드에 다른 오류가 있다고 생각되지만 문제를 해결할 것으로 생각됩니다.

출처

2017-01-10 11:06:19 Ped

난 그냥 Eldelshell에 의해 주어진 동일한 코드를 복사하고 실행했습니다. 당신은 그 코드 아래에서 볼 수 있습니다. –

-1

import React, { Component } from 'react'; 
 

 
import { 
 
    AppRegistry, 
 
    StyleSheet, 
 
    Text, 
 
    TextInput, 
 
    View, 
 
    Button, 
 
    Checkbox, 
 
    WebView, 
 
    Alert 
 
} from 'react-native'; 
 

 

 

 
class AwesomeProject extends React.Component { 
 
    constructor(props){ 
 
     super(props); 
 
     this.state = { f1: null, f2: null, result: null }; 
 
    } 
 

 

 
    
 

 
    render() { 
 
     
 
     
 
     
 
     return (
 
      <View> 
 
     
 
      
 
      <TextInput keyboardType='numeric' onChangeText={(text) => this.setState({f1: parseInt(text)})} /> 
 

 
      <TextInput keyboardType='numeric' onChangeText={(text) => this.setState({f2: parseInt(text)})} /> 
 

 

 
      </View> 
 
     ); 
 
    } 
 
} 
 

 

 

 
AppRegistry.registerComponent('AwesomeProject',() => AwesomeProject);

import React, { Component } from 'react'; 
 

 
import { 
 
    AppRegistry, 
 
    StyleSheet, 
 
    Text, 
 
    TextInput, 
 
    View, 
 
    Button, 
 
    
 
} from 'react-native'; 
 

 

 

 
class AwesomeProject extends React.Component { 
 
    constructor(props){ 
 
     super(props); 
 
     this.state = { f1: null, f2: null, result: null }; 
 
    } 
 

 

 
    
 

 
    render() { 
 
     
 
     
 
     
 
     return (
 
      <View> 
 
      var result = f1 && f2 ? f1 + f2 : null; 
 
      
 
      <TextInput keyboardType='numeric' onChangeText={(text) => this.setState({f1: parseInt(text)})} /> 
 

 
      <TextInput keyboardType='numeric' onChangeText={(text) => this.setState({f2: parseInt(text)})} /> 
 

 

 
       { result ? <Text>{ }</Text> : null } 
 

 
      </View> 
 
     ); 
 
    } 
 
} 
 

 

 

 
AppRegistry.registerComponent('AwesomeProject',() => AwesomeProject);

출처

2017-01-10 12:24:29

import React, { Component } from 'react'; 
import {AppRegistry,StyleSheet,Text,TextInput,View,Button, } from 'react-native'; 
export default class logintut extends Component{ 


    constructor(props){ 
     super(props); 
     this.state ={ f1: '',f2: '',result: '' }; 
    } 
    render() {  
     var f1 = this.state.f1; 
     var f2 = this.state.f2 ; 
      const result = f1 && f2 ? f2 + f1 : null; 

     return ( 

      <View>       
       <TextInput keyboardType ='numeric' onChangeText= {(text) => this.setState({f1:parseInt(text)})} /> 

       <TextInput keyboardType ='numeric' onChangeText={(text) => this.setState({f2: parseInt(text)})} /> 

       { result ? <Text>{ result }</Text> : null } 
      </View> 
     ); 
     } 
} 
AppRegistry.registerComponent('logintut',() => logintut);

출처

2017-06-09 07:35:53

당신이 가서 ...

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="UTF-8" /> 
    <title>Hello World</title> 

    <script src="https://unpkg.com/[email protected]/dist/react.min.js"></script> 
    <script src="https://unpkg.com/[email protected]/dist/react-dom.min.js"></script> 
    <script src="https://unpkg.com/[email protected]/babel.min.js"></script> 

    </head> 
    <body> 
    <div id="root"></div> 
    <script type="text/babel"> 
     class Calculator extends React.Component{ 
      constructor(props){ 
       super(props); 
       this.state = { 
        number1 : 0, 
        number2 : 0, 
        result : 0 
       } 
      } 

      doAction =() => { 
       this.setState({result : parseInt(this.state.number1) + parseInt(this.state.number2) }); 
      } 



      render(){ 
       return(
       <div> 
       <input type='number' onChange={(event)=>this.setState({number1:event.target.value})}/> 
       <input type='number' onChange={(event)=>this.setState({number2:event.target.value})}/> 
       <input type="button" onClick={this.doAction} value="Add"/> 
       <input type='text' value={this.state.result} readonly/> 
       </div> 

       ) 
      }   
     } 
    React.render(
     <Calculator/>, 
     document.getElementById('root') 
    )  
    </script> 
    </body> 
    </html>

출처

2017-12-05 04:23:00 Ajay

반응 네이티브를 사용하여 두 값을 더하고 결과를 표시합니다.

답변

관련 문제