FlatList 中的 TextInput

Question

描述

根据下面的示例代码，FlatList returns n 个 TextInput，当在特定 TextInput 上输入值时，它会不断重新呈现所有其他 TextInput。

示例代码

<FlatList
    ...........
    renderItem ={this.renderItem}
/>

renderItem=(item)=>{

   <Text>{item.name}</Text>
   <TextInput
   .........
   onChangeText ={(text)=>this.setState({text})}
   value={this. state.text}
/>

}

解决方案

我试图为 TextInput 分配一个键，但不知道如何避免它

Answer 1

只需从您的 TextInput 中删除 value 属性，但这不是解决方案，因为该值仅存储在单一状态中，因此如果您想要获得多个文本输入的值，您必须创建 rowrender 和状态数组

<TextInput
    .........
    onChangeText ={(text)=>this.setState({text})}
    //value={this. state.text}
/>

Answer 2

更新：添加了完整示例

您需要将 textinputs 状态维护为数组以存储每个 textinput 的值

import React, { Component } from 'react';
import {
  View,
  Text,
  FlatList,
  TouchableOpacity,
  TextInput,
} from 'react-native';

export class Demo extends Component {
  state = {
    textInputs: [],
  };

  render() {
    return (
      <View style={{ flex: 1, marginTop: 20 }}>
        <FlatList
          style={{ flex: 1 }}
          data={[1, 2, 3, 4, 5]}
          renderItem={({ item, index }) => {
            return (
              <View
                style={{
                  height: 100,
                  backgroundColor: '#F0F0F0',
                  width: 300,
                  alignSelf: 'center',
                  margin: 10,
                }}
              >
                <TextInput
                  style={{
                    flex: 1,
                    backgroundColor: '#C0C0C0',
                  }}
                  onChangeText={text => {
                    let { textInputs } = this.state;
                    textInputs[index] = text;
                    this.setState({
                      textInputs,
                    });
                  }}
                  value={this.state.textInputs[index]}
                />
                <TouchableOpacity
                  style={{
                    backgroundColor: 'red',
                    flex: 1,
                    alignItems: 'center',
                    justifyContent: 'center',
                  }}
                  onPress={() => {
                    let { textInputs } = this.state;
                    textInputs[index] = '';
                    this.setState({
                      textInputs,
                    });
                  }}
                >
                  <Text> Clear</Text>
                </TouchableOpacity>
              </View>
            );
          }}
        />
      </View>
    );
  }
}

FlatList 中的 TextInput

TextInput inside a FlatList

javascript

android

react-native

react-native-flatlist