我有一个呈现<FlatList />的组件,该列表上的每个项目都是<TextInput /> .
我想要实现的基本上是在提交它们时使用Input ref.focus()
方法和onSubmitEditing道具在TextInputs之间跳转 . 问题是因为FlatList是动态的,并且每个项目都有自己的 key
prop意味着列表中呈现的每个组件都是不同的实例,我找不到保存所有TextInput引用的方法,然后使用它们跳转到下一个TextInputs .
世博会演示:https://snack.expo.io/@karljs/react-native-textinput-flatlist
class Input extends Component {
constructor (props) {
super(props)
this.inputRef = null;
}
render () {
return (
<View style={styles.row}>
<Text>{this.props.name}</Text>
<TextInput
style={styles.input}
ref={(ref) => this.inputRef = ref}
/>
// onSubmitEditing={() => this.nextInput.focus() }}
</View>
)
}
}
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<FlatList
data={[{name: 'John'}, {name: 'Paul'}]}
renderItem={({item, index}) => <Input
key={index}
name={item.name}
/>}
/>
</View>
);
}
}
谢谢!