gpt4 book ai didi

javascript - FlatList 中的 TextInput

转载 作者:行者123 更新时间:2023-11-29 14:59:28 26 4
gpt4 key购买 nike

描述

从下面的示例代码中,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>
);
}
}

关于javascript - FlatList 中的 TextInput,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51206415/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com