我有一个Picker,其列表根据之前选择的内容动态加载。当我从列表中选择一个值时,我想将其移动到另一个列表并从选项中删除它。问题在于,当我选择一个选项时,每次由于setState重新呈现列表时,它都会选择最顶层的值,并触发该值的onValueChange。这会导致每个值触发事件并每次清空列表。
我已经尝试将选择器分成它自己的组件,我已经尝试了它有和没有默认选择值,我已经将所选值设置为最高值,null,undefined,你命名它。我无法弄清楚当我重新加载列表时如何防止此事件被触发。
取following demo app,例如:
import React, { Component } from 'react';
import {
AppRegistry,
Picker,
Text,
View
} from 'react-native';
export default class Sandbox extends Component {
constructor(props) {
super(props);
this.state = {
list: [
{id: 1, title: "One"},
{id: 2, title: "Two"},
{id: 3, title: "Three"},
{id: 4, title: "Four"},
],
selected: []
};
}
updateLists(id) {
var list = this.state.list;
var selected = this.state.selected
for(var i = 0; i < list.length; i++) {
var obj = list[i];
if(obj.id == id) {
selected.push(obj);
list.splice(i, 1)
}
}
this.setState({ list: list, selected: selected });
}
render() {
return (
<View>
<Picker
onValueChange={(id) => {
this.updateLists(id);
}}>
{this.state.list.map((item, index) => {
return <Picker.Item key={index} label={item.title} value={item.id} />
})}
</Picker>
<Text>{this.state.selected.toString()}</Text>
</View>
);
}
}
AppRegistry.registerComponent('Sandbox', () => Sandbox);
从该列表中选择任何值将触发每个值的updateLists()
方法,直到它们全部被删除。使用附加的RN Play链接,我发现这似乎只是Android问题。 iOS工作(大部分)很好。