React-Native TextInput 专注于 FlatList

Question

我有一个呈现<FlatList /> 的组件，该列表中的每个项目都是<TextInput />。

我想要实现的基本上是在提交时使用 Input ref.focus() 方法和 onSubmitEditing 道具在这些 TextInputs 之间跳转。问题是，由于 FlatList 是动态的，并且每个项目都有自己的 key 道具，这意味着列表中呈现的每个组件都是不同的实例，我找不到保存所有 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>
        );
      }
    }

谢谢！

Answer 1

我的方式...

renderItem(data) {
const { item } = data;
return (
<View>
<TextInput
 ref={(input) => { this['input_' + item.iter] = input; }}
 onSubmitEditing={() => { this['input_' + (item.iter + 1)].focus(); }}
 blurOnSubmit={false}
 selectTextOnFocus
 keyboardType={'numeric'}
 defaultValue={0}
 placeholder="0"
 onChangeText={text => this.changeItem(text, item)}
/>
</View >)
}

<FlatList
 data={doc.products}
 renderItem={item => this.renderItem(item)}
 keyExtractor={item => item.iter.toString()}
 extraData={doc.products}
/>