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

편집

처리하려면 당신의 TextInput은 다음과 같이됩니다 onChangeText :

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]을 사용하여 입력을 참조 할 수 있습니다.