在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]來引用輸入。