Question

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

我想要实现的基本上是使用Input ref.focus()方法和onSubmitEditing道具在提交这些TextInput时在它们之间跳转。事实是，由于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}
/>

React-Native TextInput专注于FlatList

1 个答案: