javascript - FlatList 中的 TextInput
问题描述
描述
从下面的示例代码中,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 分配一个键,但不知道如何使用它
解决方案
更新:添加了完整的示例
您需要将 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>
);
}
}
推荐阅读
- c# - 在 .net 核心应用程序上实现 JWT 会引发无效负载
- blazor-server-side - 如何在不使用服务的情况下在 Blazor 中逐页传递模型?
- c# - MVC ADO.NET 在插入值时出现参数错误
- json - 将 Json 字符串转换为结构时解析错误
- node.js - 在 Nodejs 本地正确保存数据
- android - 如何在应用程序中集成“评论”和“喜欢”功能?
- oracle-sqldeveloper - 特定日期/时间格式的 NLS 设置
- python - 带有 PartitionedVariable 的 Tensorflow ExponentialMovingAverage
- asp.net - 如何在asp.net核心的ajax中加载部分视图
- php - 根据每行的按下按钮获取 id 的替代方法?