FlatList 中的 TextInput答案

【问题标题】：TextInput inside a FlatListFlatList 中的 TextInput
【发布时间】：2018-12-14 19:52:04
【问题描述】：

说明

从下面的示例代码中，FlatList 返回 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 分配一个键，但不知道如何去解决它

【问题讨论】：

标签： javascript android react-native react-native-flatlist

【解决方案1】：

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

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

【讨论】：

请看snack.expo.io/BJGMscqsS 输入单个字符后设备上的运气不好，键盘坏了。
@MayurBaldha 我稍后在上面看到了答案，这是使用 Flatlist 中使用的任何元素实现此功能的最佳方式。所以试试那个，而不是我的答案。
:it's not working check 从上面的示例代码中，我尝试将文本框与 Flatlist renderItem 方法中的内容一起呈现，同时尝试更新文本框值。输入单个字符后设备上的运气不佳，键盘出现故障。

【解决方案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>
    );
  }
}

【讨论】：

如果我想在 onPress 事件后将 textInputs[] 设置为空怎么办
@D.Moplio 是 Button 将在 FlatList 的每个项目中还是分开？如果该按钮适用于平面列表中的每个项目，那么您可以执行 onPress={ let { textInputs } = this.state textInputs[index] = "" this.setState({textInputs}) // 重置为空字符串}
感谢@Ayush Nawani，我之前已经尝试过这个解决方案，但是输入的值没有从 TextInput 中清除。我也尝试使用 this.ref.textInput.clear() 和 setNativeProps({text: ' '}) 同样的问题
@D.Moplio 对不起，我以前的代码中几乎没有问题。您可以查看我的主要更新答案，我已经用一个完整的示例对其进行了更新。谢谢。希望它对你有用。
@AyushNawani 请看一下snack.expo.io/BJGMscqsS 输入单个字符后设备上的运气不好，键盘坏了。