在React Native中按下按钮时，一个接一个地追加TextInput组件

Question

我是React Native中的新成员。

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

但是当我再次按下Add按钮时，它将TextInput组件推到第一个按钮下面。但我想把它推到最后一个之下。

像：Add |Add | Add again.

但我需要Add | Add Again | Add等。

可以做些什么来实现这一目标？我跟随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); 

Answer 1

的问题是，你在呼唤insertSomeThing功能，此功能在变量arr推新<Text>，然后按以下顺序呈现：

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

如果你想插入不同TextView在列表的末尾，您必须删除{arrAnother}并修改您的地图功能。您的代码看起来就像这样：

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看起来就像这样：

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]来引用输入。