如何处理在 React Native 中动态创建的多个 textInput 状态

Question

我们如何从动态创建的文本输入中访问值。像平面列表一样创建 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>
 );
};

Answer 1

您可以将输入的文本存储在您的状态中。只听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})}