Tengo un componente Flatlist que representa TextInput y un botón que agrega dinámicamente una entrada de texto en la lista. El problema es que dado que FlatList es dinámico y cada entrada de texto tiene su propia referencia, no puedo obtener una referencia de una entrada. Quiero obtener una referencia de entrada de texto que está dentro de la lista plana y enfocarla.
Código de muestra :
<FlatList data={this.state.arrayHolder} ref={(list) => this.myFlatList = list} extraData={this.state.arrayHolder} keyExtractor={(index) => index.toString()} ItemSeparatorComponent={this.FlatListItemSeparator} renderItem={(index) => { return ( <TouchableOpacity> <Stack> <Stack> <FormControl.Label>City</FormControl.Label> <TouchableOpacity> <Input isDisabled="true" variant="outline" p={2} placeholder="Choose City" width="100%" InputRightElement={ <Icon size={20} name="chevron-down" /> } /> </TouchableOpacity> </Stack> </Stack> <Stack> <FormControl.Label>Field 1</FormControl.Label> <Input blurOnSubmit={false} keyboardType='number-pad' ref={input => { this[index.item[index.index + 1].Field1] = input }} onSubmitEditing={() => { this[index.item[index.index + 1].Field2].focus(); }} onChangeText={(text) => this.addValues(text, index.index, "Field1")} /> </Stack> <Stack> <FormControl.Label>Field 2</FormControl.Label> <Input blurOnSubmit={false} keyboardType='number-pad' ref={input => { this[index.item[index.index + 1].Field2] = input }} onSubmitEditing={() => { this[index.item[index.index + 1].Field3].focus(); }} onChangeText={(text) => this.addValues(text, index.index, "Field2")} /> </Stack> <Stack> <FormControl.Label>Field 3</FormControl.Label> <Input blurOnSubmit={false} keyboardType='number-pad' ref={input => { this[index.item[index.index + 1].Field3] = input }} isDisabled={true} /> </Stack> </TouchableOpacity> ) }} />Quiero obtener la referencia del campo 1 y enfocarlo. La referencia es dinámica y proviene de index.