如何处理在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>
 );
};

- Namrata Shinde

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

- Nikolay Tomitov

---

谢谢，这个解决方案有效。如何处理选择器（下拉菜单）及其选定状态数组。 - Namrata Shinde

基本上相同的方式 - 在某些事件（onChange，onPress等）上附加一个函数来更新您的状态。不要忘记复制数据，您将要更新它。 - Nikolay Tomitov

我已经尝试使用onValueChange方法，通过为其提供函数来改变所选选择器的状态。请您能否提供示例样本？ - Namrata Shinde

我已经尝试了给出的解决方案，但仍然无法正常工作。你能帮忙看看我哪里错了吗？链接 - Namrata Shinde

86行：newArray[value] = index; -> 更改为 newArray[index] = value; 并且：在 onValueChange 函数中交换参数 -> onValueChange(index: number, value: string) - Nikolay Tomitov