在React Native中按下按钮时，一个接一个地追加TextInput组件 [英] Append TextInput component one after another when press button in React Native

问题描述

我是 React Native 中的新手.

我正在使用两个按钮在视图中添加 TextInput 组件.当我按下 Add 按钮时，它将一个 TextInput 组件推入视图，当我按下 Add Again 按钮时，它将另一个 TextInput推入组件下一个.

I am using two button to add TextInput component in the view. When I press Add button, it pushes one TextInput component into the view and when I press Add Again button, it pushes another TextInput component below previous one.

但是当我再次按下 Add 按钮时，它将 TextInput 组件推到第一个组件下方.但是我想将其推到最后一个.

But when I press Add button again, it pushes the TextInput component below the first one. But I want to push it below the last one.

赞:添加|添加|再次添加.

但是我需要 Add |再次添加|添加，依此类推.

But I need Add | Add Again | Add and so on.

该怎么做才能做到这一点?我遵循了此.

What can be done to achieve this ? I have followed this.

'use strict';

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

let index = 0 

class Test extends Component{
constructor(){
super();
this.state = {
  arr: []
};
}
insertSomeThing(){
this.state.arr.push(index++)
this.setState({ arr: this.state.arr })
}

render() {
let arr = this.state.arr.map((r, i) => {
    return (
      <View key={ i } style={styles.insertStyle}>
        <TextInput placeholder = 'abc' />
      </View>
      );
})
let arrAnother = this.state.arr.map((r, i) => {
    return (
      <View key={ i } style={styles.insertStyle}>
        <TextInput placeholder = 'def' />
      </View>
      );
})

return (
  <View style={styles.container}>
  <View>
    <TouchableHighlight 
      onPress={ this.insertSomeThing.bind(this) } 
      style={styles.button}>
        <Text>Add</Text>
    </TouchableHighlight>
  </View>
  <View>
    <TouchableHighlight 
      onPress={ this.insertSomeThing.bind(this) } 
      style={styles.button}>
        <Text>Add Again</Text>
    </TouchableHighlight>
  </View>
  { arr }
  {arrAnother}
  </View>
);
}
}

var styles = StyleSheet.create({
  container: {
flex: 1,
marginTop: 60,
  }, 
  insertStyle: {
height:40,
alignItems: 'center',
justifyContent: 'center',
borderBottomColor: '#ededed',
borderBottomWidth: 1
  },
  button: {
alignItems: 'center',
justifyContent: 'center',
height:55,
backgroundColor: '#ededed',
marginBottom:10
  }
});

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

推荐答案

问题是您正在调用 insertSomeThing 函数，并且此函数推送了新的< Text> 在变量 arr 中，然后按以下顺序呈现:

The problem is that you are calling insertSomeThing function and this function push a new <Text> in variable arr and then it is rendered in the following order:

</View>
    { arr }
    {arrAnother}
</View>

如果要在列表末尾插入其他TextView，则必须删除 {arrAnother} 并修改地图功能.您的代码将如下所示:

If you want to insert a different TextView at the end of the list you must remove {arrAnother} and modify your map functions. Your code will look like this:

insertSomeThing( placeholder ){
  this.state.arr.push({index:index++, placeholder:placeholder});
  this.setState({ arr: this.state.arr });
}

render() {
  let arr = this.state.arr.map((r, i) => {
    return (
      <View key={ i } style={styles.insertStyle}>
        <TextInput placeholder = {r.placeholder} />
      </View>
    );
  });

  return (
    <View style={styles.container}>
      <View>
        <TouchableHighlight 
          onPress={ () => this.insertSomeThing('add') } 
          style={styles.button}>

          <Text>Add</Text>
        </TouchableHighlight>
      </View>
      <View>
        <TouchableHighlight 
          onPress={ () => this.insertSomeThing('addAgain') } 
          style={styles.button}>
             <Text>Add Again</Text>
        </TouchableHighlight>
      </View>
      { arr }
    </View>
  );
}

编辑

要处理 onChangeText ，您的TextInput将如下所示:

To handle onChangeText your TextInput will look like this:

let arr = this.state.arr.map((r, i) => {

    var ref = 'textinput'+i;

    return (
      <View key={ i } style={styles.insertStyle}>
        <TextInput ref={ref} onChangeText={(text) => this._onChangeText(text,ref)} />
      </View>
    );
  });

您必须在组件中定义 _onChangeText 来处理事件.您将收到文本和对输入的引用.您以后可以使用 this.refs [ref] 引用输入.

You have to define _onChangeText in your component to handle the event. You will receive text and reference to the input. You later can reference the input using this.refs[ref].

这篇关于在React Native中按下按钮时，一个接一个地追加TextInput组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！