[英]TextInput inside a FlatList
描述
从下面的示例代码中,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>
);
}
}
只需从TextInput
删除value
属性, 但这不是解决方案,因为该值仅存储为单个状态,因此,如果要获取多个textinput的值,则必须创建rowrender和状态数组
<TextInput
.........
onChangeText ={(text)=>this.setState({text})}
//value={this. state.text}
/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.