英文:
React Native Picker: Set and Get different Picker Values
问题
我正在使用React Native Picker，并创建了两个状态：userType和name。
然而，有两种userType：Freelancer（自由职业者）、Client（客户）。对于每种userType都有两个name，它们分别是：Freelancer 1、Freelancer 2 和 Client 1、Client 2。
目前，我有两个选择器（Picker）。一个用于userType，另一个用于name。无论选择了哪种userType，第二个选择器都显示所有的name，即Freelancer 1、Freelancer 2、Client 1、Client 2。
但这是我想要实现的内容：
如何实现：不要显示所有的
name，而是根据所选择的userType来显示特定的name。例如：如果userType === Freelancer，那么name选择器应该只显示Freelancer 1和Freelancer 2。如果userType === Client，那么name选择器应该只显示Client 1和Client 2。
下面提供了代码片段：
constructor(props) {
super(props);
this.state = {
userType: '',
name: '',
}
}
render() {
return (
<View>
<View style={{ flexDirection: 'row' }}>
<Text style={styles.titleStyle}>User Type</Text>
<View style={styles.pickerStyle}>
{<Picker
mode='dropdown'
selectedValue={this.state.userType}
onValueChange={(itemValue, itemIndex) =>
this.setState({ userType: itemValue })
}>
<Picker.Item label="Select User Type" value="" />
<Picker.Item label="Freelancer" value="Freelancer" />
<Picker.Item label="Client" value="Client" />
</Picker>}
</View>
</View>
<View style={{ flexDirection: 'row' }}>
<Text style={styles.titleStyle}>Name</Text>
<View style={styles.pickerStyle}>
{<Picker
mode='dropdown'
selectedValue={this.state.name}
onValueChange={(itemValue, itemIndex) =>
this.setState({ name: itemValue })
}>
<Picker.Item label="Please Select" value="" />
{this.state.userType === 'Freelancer' && (
<>
<Picker.Item label="Freelancer 1" value="Freelancer 1" />
<Picker.Item label="Freelancer 2" value="Freelancer 2" />
</>
)}
{this.state.userType === 'Client' && (
<>
<Picker.Item label="Client 1" value="Client 1" />
<Picker.Item label="Client 2" value="Client 2" />
</>
)}
</Picker>}
</View>
</View>
</View>
);
};
应用程序截图：
英文:
I am working with React Native Picker and I have created two states: userType and name.
However, there are two userType: Freelancer, Client. There are also two name for each userType, and these are: Freelancer 1, Freelancer 2, and Client 1, Client 2.
Currently, I have two pickers. One has the userType and the other has name. Regardless of the userType selected, the 2nd picker shows all the name i.e Freelancer 1, Freelancer 2, Client 1, Client 2.
But this is what I am trying to achieve:
> HOW TO: Instead of showing all the name, I want to show specific name depending on the userType selected. For example: if userType === Freelancer, then name picker should display only Freelancer 1, Freelancer 2. And, if userType === Client, then name picker should display only Client 1, Client 2.
Code snippet Provided Below:
constructor(props) {
super(props);
this.state = {
userType: '',
name: '',
}
}
render() {
return (
<View>
<View style={{ flexDirection: 'row' }}>
<Text style={styles.titleStyle}>User Type</Text>
<View style={styles.pickerStyle}>
{<Picker
mode='dropdown'
selectedValue={this.state.userType}
onValueChange={(itemValue, itemIndex) =>
this.setState({ userType: itemValue })
}>
<Picker.Item label="Select User Type" value="" />
<Picker.Item label="Freelancer" value="Freelancer" />
<Picker.Item label="Client" value="Client" />
</Picker>}
</View>
</View>
<View style={{ flexDirection: 'row' }}>
<Text style={styles.titleStyle}>Name</Text>
<View style={styles.pickerStyle}>
{<Picker
mode='dropdown'
selectedValue={this.state.name}
onValueChange={(itemValue, itemIndex) =>
this.setState({ name: itemValue })
}>
<Picker.Item label="Please Select" value="" />
<Picker.Item label="Freelancer 1" value="Freelancer 1" />
<Picker.Item label="Freelancer 2" value="Freelancer 2" />
<Picker.Item label="Client 1" value="Client 1" />
<Picker.Item label="Client 2" value="Client 2" />
</Picker>}
</View>
</View>
</View>
);
};
App Screenshot:
答案1
得分: 1
你应该有一个根据用户类型返回用户名的函数。
renderUserNames() {
if (this.state.userType === 'Freelancer') {
return [
<Picker.Item label="自由职业者 1" value="自由职业者 1" />,
<Picker.Item label="自由职业者 2" value="自由职业者 2" />
];
} else {
return [
<Picker.Item label="客户 1" value="客户 1" />,
<Picker.Item label="客户 2" value="客户 2" />
];
}
}
然后在render函数中可以这样调用：
render() {
let options = this.renderUserNames();
return (
<View>
<View style={{ flexDirection: 'row' }}>
<Text style={styles.titleStyle}>用户类型</Text>
<View style={styles.pickerStyle}>
<Picker
mode='dropdown'
selectedValue={this.state.userType}
onValueChange={(itemValue, itemIndex) =>
this.setState({ userType: itemValue })
}>
<Picker.Item label="选择用户类型" value="" />
<Picker.Item label="自由职业者" value="自由职业者" />
<Picker.Item label="客户" value="客户" />
</Picker>
</View>
</View>
<View style={{ flexDirection: 'row' }}>
<Text style={styles.titleStyle}>姓名</Text>
<View style={styles.pickerStyle}>
<Picker
mode='dropdown'
selectedValue={this.state.name}
onValueChange={(itemValue, itemIndex) =>
this.setState({ name: itemValue })
}>
<Picker.Item label="请选择" value="" />
{options}
</Picker>
</View>
</View>
</View>
);
};
这是你的代码的中文翻译。
英文:
you should have function that return usernames based on user type
renderUserNames() {
if(this.state.userType=='Freelancer'){
return [<Picker.Item label="Freelancer 1" value="Freelancer 1" />,
<Picker.Item label="Freelancer 2" value="Freelancer 2" />]
}else{
return [<Picker.Item label="Client 1" value="Client 1" />,
<Picker.Item label="Client 2" value="Client 2" />]
}
}
then inside render function you can call i like
render() {
let options=this.renderUserNames();
return (
<View>
<View style={{ flexDirection: 'row' }}>
<Text style={styles.titleStyle}>User Type</Text>
<View style={styles.pickerStyle}>
{<Picker
mode='dropdown'
selectedValue={this.state.userType}
onValueChange={(itemValue, itemIndex) =>
this.setState({ userType: itemValue })
}>
<Picker.Item label="Select User Type" value="" />
<Picker.Item label="Freelancer" value="Freelancer" />
<Picker.Item label="Client" value="Client" />
</Picker>}
</View>
</View>
<View style={{ flexDirection: 'row' }}>
<Text style={styles.titleStyle}>Name</Text>
<View style={styles.pickerStyle}>
{<Picker
mode='dropdown'
selectedValue={this.state.name}
onValueChange={(itemValue, itemIndex) =>
this.setState({ name: itemValue })
}>
<Picker.Item label="Please Select" value="" />
{options}
</Picker>}
</View>
</View>
</View>
);
};
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论