Question

我正在开发使用react native的简单计算器，仅用于添加两个数字。如何将值存储到变量并使用TextInput显示它们？以及如何添加这些变量？

Answer 1

对于每个TextInput，您应该将它们保存到您的州：

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'来显示数字键盘。

Answer 2

您看到的错误是因为渲染函数应该只返回一个元素，而不是几个元素。所以最简单的方法就是将它们包装在View中。

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

除此之外，从快速概述我认为您在代码中还有其他一些错误，但我想您会解决它们。

Answer 3

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

Answer 4

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

Answer 5

你去......

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

    <script src="https://unpkg.com/react@0.14.8/dist/react.min.js"></script>
    <script src="https://unpkg.com/react-dom@0.14.8/dist/react-dom.min.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/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>

Answer 6

要添加两个数字，我们需要使用parseInt（text）函数将 TextInput 中的字符串解析为int，然后在单击按钮时添加它们以显示结果。

    <TextInput onChangeText={(text) => this.setState({input1: parseInt(text)})}>
    <TextInput onChangeText={(text) => this.setState({input2: parseInt(text)})}>
    <TouchableOpacity onPress={()=>{
          this.setState({result: this.state.input1 && this.state.input2 ? this.state.input1 + this.state.input2 : null})}}>

// and for displaying result:
     <Text >{ this.state.result ? 'Result= '+ this.state.result : null}</Text>

我已经在github上使用react本机和本机库创建了一个示例项目。请参考：https://github.com/jayad-aadrit/react_native_appcenter

Answer 7

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

使用react native添加两个值并显示结果

7 个答案: