访问动态Textinput react-native的值

时间:2019-04-30 07:49:41

标签: react-native

我正在根据用户在本机中创建动态Textinput。如果用户在主Textinput上输入2,它将生成2个文本输入。如果用户输入3,则将生成3个textinputs。我想加上动态文本输入中的值并显示总值。我创建了动态文本输入,但是却想抓住该值并找到总和。

import React, { Component } from 'react';
import { AppRegistry, View, Text, Button, TextInput,ScrollView} from 'react-native';

var sum =0;

export default class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      textInput : [],
      key:'',
    }
  }






  addTextInput = (key) => {


   this.setState({textInput:[]})

 let textInput = this.state.textInput;

    for(var i=0; i<key;i++){
      console.log(i);
      textInput.push(
        <View key={i}>
            <Text style={{fontWeight:'bold',margin:'4%'}}>Plot {i+1} </Text>
            <TextInput 
            style={{marginLeft:'4%',height: 40, width:'90%', alignItems:'center',marginTop:'1%',borderWidth:1}}  
             />
        </View>
        );
      this.setState({ textInput })
     }
  }


  render(){
    return(
      <View>
        <ScrollView>
          <TextInput 
           style={{marginLeft:'4%',height: 40, width:'90%', alignItems:'center',marginTop:'1%',borderWidth:1}} 
           onChangeText={ (text) => this.addTextInput(text) }
           maxLength={1}
          />

          {this.state.textInput.map((value, index) => {
            return value
          })}

            <View
                style={{height: 100, width:'80%',alignItems:'center',marginTop:'10%'}}

          />

        </ScrollView>
     </View>
    )
  }
}

0 个答案:

没有答案