FlatList中的TextInput-Java 学习之路

描述

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

2 回答

0
只需从 TextInput 删除 value 属性，但这不是解决方案，因为值仅存储为单个状态，因此如果要获取多个textinput的值，则必须创建rowrender和状态数组
```
<TextInput
    .........
    onChangeText ={(text)=>this.setState({text})}
    //value={this. state.text}
/>
```
回复于 2024-05-05T16:58:32+08:00

Update ：添加了完整示例

您需要将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>
    );
  }
}

回复于 2024-05-05T16:58:32+08:00

FlatList中的TextInput

2 回答

相关问题