как обрабатывать несколько состояний textInput, создаваемых динамически в React Native - PullRequest
Новая
       58

как обрабатывать несколько состояний textInput, создаваемых динамически в React Native

0 голосов
/ 26 сентября 2018

Как мы можем получить доступ к значениям из динамически созданного ввода текста.Как плоский список создает 3 ввода текста, а затем по нажатию кнопки мы проверяем, какой из них добавлен, а какой нет.Как управлять множественным состоянием массива.в настоящее время я сделал это 

const data = [1,2];

constructor(props) {
super(props);
this.state = {
  Textdata:[],
};

}

  SubmitButton(){
//how to access those text input values and add to array
}


<FlatList
data={data}
renderItem={this.renderItem}
keyExtractor={(item, index) => item}
 />

renderItem = ({ item, index }) => {

return (
    <View>
     <Item 
        floatingLabel 
        style={styles.InputBoxStyle}
        >
        <Label>First Name</Label>
        <Input 

          />
     </Item>
     <Item 
        floatingLabel 
         style={styles.InputBoxStyle}>
         <Label>Last Name</Label>
        <Input 

          />
      </Item>
<Button rounded
        onPress={this.SubmitButton}>
        <Text>Submit</Text>
     </Button>

    </View>
 );
};

1 Ответ

0 голосов
/ 26 сентября 2018

Вы можете хранить тексты ввода в вашем состоянии.Просто слушайте событие onChangeText.Попробуйте добавить это к вашему входу: 

onChangeText={val => updateState(index, val) />

Где index - индекс вашего элемента из функции renderItem.Позже добавьте метод: 

updateState = (index,value) => {
   const Textdata = [...this.state.Textdata]; //make a copy of array
   Textdata[index] = value;
   this.setState({ Textdata: Textdata });
}

Затем, нажав кнопку, вы можете проверить этот массив.

В качестве другого примера, когда значение из компонента Picker изменяется, вы можете обработать его следующим образом: 

onValueChange={itemValue => this.setState({someNameForThisPicker: itemValue})}
...