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

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

1 个答案: