我只是 react native 的初学者，我试图为我的练习目的做一些东西。我正在制作一个电子商务类型的应用程序，并使用反应原生模态过滤器选择器来获取数量。
但是，当我更新一个产品的价值时，所有产品的价值都会自动更新。
我想因为我正在为所有值输入调用类似的函数。但是，我不知道如何通过 id/key 动态传递它并只更新一个值。有人可以告诉我该怎么做。
在这里，我附上了我当前设计的屏幕截图：从任何一个选择器更新多个选择器的问题
这是我的代码，我正在遭受...:)
import React, {Component} from 'react';
import { StatusBar, StyleSheet,View, TouchableOpacity, ScrollView, Dimensions, KeyboardAvoidingView,} from 'react-native';
import { Container, Header, Left, Body, Right, Button, Icon, Title, Item, Input, List, ListItem, Thumbnail, Text, } from 'native-base';
import Image from 'react-native-scalable-image';
import { Col, Row, Grid } from "react-native-easy-grid";
import ModalFilterPicker from 'react-native-modal-filter-picker'
let WIDTH = Dimensions.get('window');
type Props = {};
export default class Home extends Component<Props> {
static navigationOptions = {
header: null
}
constructor (props, ctx) {
super(props, ctx);
this.state = {
visible: false,
picked: '0',
count: '0',
};
}
render() {
const { visible, picked, count } = this.state;
const options = [
{
key: '0',
label: '0',
},
{
key: '1',
label: '1',
},
{
key: '2',
label: '2',
},
{
key: '3',
label: '3',
},
{
key: '4',
label: '4',
},
{
key: '5',
label: '5',
},
{
key: '6',
label: '6',
},
{
key: '7',
label: '7',
},
{
key: '8',
label: '8',
},
{
key: '10',
label: '10',
},
{
key: '11',
label: '11',
},
];
return (
<Container>
<Header noShadow style={{backgroundColor: '#2e6153',}} androidStatusBarColor="#004c40">
<Left style={{flex: 1,}}>
<Button transparent hitSlop={{top: 3, left: 3, bottom: 3, right: 3}} style={{paddingLeft: 6,}}>
<Icon name='md-menu' style={{fontSize: 30,}}/>
</Button>
</Left>
<Body style={{flex: 5, flexDirection: 'row', alignItems: 'center', justifyContent: 'center',}}>
<Text style={{fontSize: 20, fontFamily: 'RobotoBold', color: '#fff',}}> Logo </Text>
</Body>
<Right style={{flex: 1,}}>
<Button transparent hitSlop={{top: 3, left: 3, bottom: 3, right: 3}}>
<Icon name='md-cart' style={{fontSize: 26,}}/>
</Button>
</Right>
</Header>
<View style={{height: 55, backgroundColor: '#2e6153', paddingHorizontal: 10,}}>
<Item style={{backgroundColor: '#fff', marginLeft: 0, borderRadius: 5, borderBottomWidth: 0,}}>
<Button transparent hitSlop={{top: 3, left: 3, bottom: 3, right: 3}}>
<Icon active name="search" style={{color: '#000',}}/>
</Button>
<Input placeholder="Search" style={{height: 45,}}/>
<Button transparent hitSlop={{top: 3, left: 3, bottom: 3, right: 3}}>
<Icon active name="barcode" style={{color: '#000',}}/>
</Button>
</Item>
</View>
<View>
<List>
<ListItem thumbnail>
<Left>
<Thumbnail square source={{ uri: 'http://shfcs.org/en/wp-content/uploads/2015/11/MedRes_Product-presentation-2.jpg' }}/>
</Left>
<Body style={{height: 80,
paddingTop: 10,
paddingBottom: 10,
}}>
<Grid>
<Row>
<Text numberOfLines={1}>Product Name</Text>
</Row>
<Row>
<Text note>Sub Category</Text>
</Row>
<Row>
<Text note>Category</Text>
</Row>
</Grid>
</Body>
<Right>
<Button bordered onPress={this.onShow} style={{width: 58,justifyContent: 'center',}}>
<Text>{this.state.picked}</Text>
</Button>
<ModalFilterPicker
visible={visible}
onSelect={this.onSelect}
onCancel={this.onCancel}
options={options}
/>
</Right>
</ListItem>
<ListItem thumbnail>
<Left>
<Thumbnail square source={{ uri: 'http://shfcs.org/en/wp-content/uploads/2015/11/MedRes_Product-presentation-2.jpg' }}/>
</Left>
<Body style={{height: 80,
paddingTop: 10,
paddingBottom: 10,
}}>
<Grid>
<Row>
<Text numberOfLines={1}>1839 Blue Box 100 FSC ACE</Text>
</Row>
<Row>
<Text note>Cig-SubGeneric</Text>
</Row>
<Row>
<Text note>CIGARETTES</Text>
</Row>
</Grid>
</Body>
<Right>
<Button bordered onPress={this.onShow} style={{width: 58, justifyContent: 'center',}}>
<Text>{this.state.picked}</Text>
</Button>
<ModalFilterPicker
visible={visible}
onSelect={this.onSelect}
onCancel={this.onCancel}
options={options}
/>
</Right>
</ListItem>
<ListItem thumbnail>
<Left>
<Thumbnail square source={{ uri: 'http://shfcs.org/en/wp-content/uploads/2015/11/MedRes_Product-presentation-2.jpg' }}/>
</Left>
<Body style={{height: 80,
paddingTop: 10,
paddingBottom: 10,
}}>
<Grid>
<Row>
<Text numberOfLines={1}>1839 Blue Box 100 FSC ACE</Text>
</Row>
<Row>
<Text note>Cig-SubGeneric</Text>
</Row>
<Row>
<Text note>CIGARETTES</Text>
</Row>
</Grid>
</Body>
<Right>
<Button bordered onPress={this.onShow} style={{width: 58,justifyContent: 'center',}}>
<Text>{this.state.picked}</Text>
</Button>
<ModalFilterPicker
visible={visible}
onSelect={this.onSelect}
onCancel={this.onCancel}
options={options}
/>
</Right>
</ListItem>
</List>
</View>
</Container>
);
}
onShow = () => {
this.setState({ visible: true });
}
onSelect = (picked) => {
this.setState({
count: picked,
picked: picked,
visible: false
})
}
onCancel = () => {
this.setState({
visible: false
});
}
}
const styles = StyleSheet.create({
container: {
flexGrow: 1,
justifyContent: 'center',
alignItems: 'center',
width: '100%',
// backgroundColor: '#00796b',
},
});
导致此问题的原因是每个列表项都引用相同的变量。 this.state.visible .有几种方法可以解决这个问题，最简单的方法是使用 多重this.state.visible .
this.state = {
visible1: false,
visible2: false,
visible2: false,
picked: '0',
count: '0',
};
对于 onPress，请使用 onPress={() => this.setState({visible$: true})} .将 $ 替换为适当的数字。
并确保每个列表项都引用它自己的this.state.visible。