如何根据另一个选择器在 React-Native 中所做的选择重新渲染选择器项目？
var 选项 =["家庭"、"储蓄"、"汽车"、"女朋友"];
var cluster=[{item："abc"，key："Home"}，{item："def"，key："Savings "}，{item："def"，key："Savings "}，{item："def"，key："Savings "}];
this.state = {
selected_picker_1: "",
selected_picker_2: "",
}
onValueChangePicker1(value) {
this.setState({
selected_picker_1: value
});
}
onValueChangePicker2(value) {
this.setState({
selected_picker_2: value
});
}
<Picker
mode="dropdown"
placeholder="Select One"
style={{ width: undefined,backgroundColor:"white",marginTop:5}}
selectedValue={this.state.selected_picker_1}
onValueChange={this.onValueChangePicker1.bind(this)}>
{options.map((item, index) => {
return (<Picker.Item label={item} value={item} key={item}/>)
})}
</Picker>
<Picker
mode="dropdown"
placeholder="Select One"
style={{ width: undefined,backgroundColor:"white",marginTop:5}}
selectedValue={this.state.selected_picker_2}
onValueChange={this.onValueChangePicker2.bind(this)}>
{cluster.map((item, index) => {
renderIf(item.key===this.state.selected_picker_1)
{
return(
<Picker.Item label={item.item} value={index} key={index}/>
)
}
})}
</Picker>
时，我需要重新渲染仅带有键"主页"的项目的第二个选择器。
由于您没有提供任何细节。这是我的假设。您的第二个选择器值(您需要根据选择进行更改的值(依赖于第一个。
首先，您需要确定哪些选取器值是依赖的。之后，可以将依赖值分配给状态。设置后，第一个选取器将更新各种选择的状态，然后第二个选取器将自动使用这些值进行更新。
这将是对一般问题的一般性回答:)
编辑
您在此处检查了错误的值renderIf(item.key===this.state.selected_picker_2)。您的第一个选取器以this.state.selected_picker_1为单位设置值，而您显示的结果基于this.state.selected_picker_2。
您的病情应更改为renderIf(item.key===this.state.selected_picker_1)
编辑 2
this的范围在 map 的回调函数中不可用。在render方法中将常量定义为const instance = this;。并将您的状况更改为renderIf(item.key===instance.state.selected_picker_1)
从此链接解决 https://github.com/GeekyAnts/NativeBase/issues/636
const items = ['Simon Mignolet','Nathaniel Clyne','Dejan Lovren','Mama Sakho','Emre Can'];
var BUTTONS = [
'Option 0',
'Option 1',
'Option 2',
'Delete',
'Cancel',
];
export default class testBase2 extends Component {
constructor(props) {
super(props);
this.state = {
selected1: 'key1'
}
}
getItems(val) {
if (val === 'key1')
{
return items;
}
else {
return BUTTONS;
}
}
onValueChange (value)
{
this.setState({
selected1 : value
});
}
onValueChange2 (value)
{
this.setState({
selected2 : value
});
}
render() {
return (
<Container>
<Header>
<Left>
<Button transparent>
<Icon name="heart" size={20} color='red' />
</Button>
</Left>
<Body>
<Title>Hello</Title>
</Body>
<Right />
</Header>
<Content padder>
<Picker
iosHeader="Select one"
mode="dropdown"
selectedValue={this.state.selected1}
onValueChange={this.onValueChange.bind(this)}>
<Item label="Wallet" value="key0" />
<Item label="ATM Card" value="key1" />
<Item label="Debit Card" value="key2" />
<Item label="Credit Card" value="key3" />
<Item label="Net Banking" value="key4" />
</Picker>
<Picker
iosHeader="Select one"
mode="dropdown"
defaultLabel={"waiting"}
selectedValue={this.state.selected2}
onValueChange={this.onValueChange2.bind(this)}>
{this.getItems(this.state.selected1).map((item, i) => {
console.log('item', item);
return <Item label={item} key={`${i}+1`} value={i} />
})}
</Picker>
</Content>
</Container>
);
}
}