javascript - 选择器在本机反应的平面列表中无法正常工作
问题描述
在 flatlist 的每个列表项中,我们都有一个 Picker 来选择值但是当我们更改选择器值时,它会发生变化并立即刷新所有其他行。仅当我们应用平面列表时才会发生这种情况,但在平面列表之外它很好。任何人都可以帮助我们,如何解决这个问题。
import React from 'react';
import { Text, View,FlatList,Image,StyleSheet ,ScrollView, TextInput,TouchableOpacity,Alert
} from 'react-native';
import { Picker ,Icon} from "native-base";
var gradeInputs= [];
var hoursInput =[];
var grades_list =[
{
"course": "BIO-110",
"TITLE": "أحياء عامة )1(",
"hours":"2"
}
,
{
"course": "CHEM-110",
"TITLE": "كيمياء عامة )1(",
"hours":"4"
}
,
{
"course": "ELCS-100",
"TITLE": "لغة انجليزية",
"hours":"3"
}
,
{
"course": "STAT-110",
"TITLE": "احصاء عام )1(",
"hours":"3"
}
];
export default class calculate_gpa extends React.Component {
constructor(props)
{
super(props);
this.state = {
selected: "A+"
};
}
onValueChange(value ) {
this.setState({
selected: value
});
}
render( ) {
return(
<View style={{flex:1}} >
<ScrollView >
<Text style={{ fontSize:20,fontWeight: 'bold',
fontFamily: "DroidKufiReqular",}}>{"\n"} أدخل الدرجة المتوقعة لكل مادة{"\n"}</Text>
<FlatList
data={ grades_list}
maxHeight={400}
renderItem={({ item, index }) =>
<View key={item.id}>
<View style={{ justifyContent: 'center',
alignItems: 'center' ,
marginTop:'7%', }}>
</View >
<View style={{
justifyContent: 'space-between',
flexDirection:'row',
alignItems:'center',
marginTop:0,
}}>
<View style={{ width: '16.5%', alignItems:'center' , top:-20 }}>
<Text style={{ textAlign: "center",}}>{item.course}</Text>
</View>
<View style={{ width: '20%', alignItems:'center', top:-15 }}>
<Text style={{ fontFamily: "DroidKufiRegular",
}}>{item.TITLE}</Text>
</View>
<View style={{ width: '20%', alignItems:'center' , top:-20,marginRight:0 }}>
<Picker style={{borderStyle:'solid',height: 50, width: 120}}
mode="dropdown"
iosIcon={<Icon name="arrow-down" />}
headerBackButtonText="Baaack!"
selectedValue={this.state.selected}
onValueChange={this.onValueChange.bind(this)}
>
<Picker.Item label="A+" value="4.5" />
<Picker.Item label="A" value="4" />
<Picker.Item label="B+" value="3.5" />
<Picker.Item label="B" value="3" />
<Picker.Item label="C+" value="2" />
</Picker>
</View>
<View style={{width: '16.5%', alignItems:'center', top:-15 }}>
<Text style={{ textAlign: "center"}}>{item.hours}</Text>
</View>
</View>
</View>
}
keyExtractor={item => item.id }
extraData={this.state}
/>
<View style={{ justifyContent: 'center',
alignItems: 'center',}}>
<TouchableOpacity style={[styles.buttonContainer, styles.loginButton]}
>
<Text style={styles.loginText}>احتسب معدلك</Text>
</TouchableOpacity>
</View>
</ScrollView >
</View>
);
}}
const styles = StyleSheet.create({
buttonContainer: {
height:60,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
marginBottom:15,
width:250,
borderRadius:30,
marginTop:20,
},
loginButton: {
backgroundColor: "#87dc9b",
},
loginText: {
color: 'white',
fontSize:20,
fontFamily: "DroidKufiBold",
},
})
解决方案
那是因为您使用的是单个值 state.selected 用于平面列表的所有项目,因此所有项目都将具有相同的值。您可以做的是在键是平面列表项的索引并且值是选择器为该项目选择的值的状态下使用对象。这样,所有项目都将具有不同的选定值。
推荐阅读
- c# - 需要帮助重新定位 .NET 应用程序
- python - 在多个时间序列的每个时间序列子图中添加垂直线
- r - Bookdown preview_chapter()不适用于编织按钮
- python - 如何将 Pytorch 模型转换为 ONNX 模型?
- kotlin - 连接到 Kotlin 中的现有数据库
- c++ - C++ 中的输入/输出运算符重载
- python - 用 Python 读取 CSV
- python - Python - NaN 返回(熊猫 - 重采样函数)
- javascript - 如何等待ajax响应?
- python-3.7 - 在 python3 中调用 locals() 时发生了什么?