0

我正在使用 React Native Picker 并创建了两个状态：userType和name.

但是，有两个userType：Freelancer， Cl ​​ient。name每个也有两个userType，它们是：Freelancer 1 , Freelancer 2和Client 1 , Client 2。

目前，我有两个选择器。一个有userType，另一个有name。无论userType选择什么，第二个选择器都会显示所有，name即 Freelancer 1、Freelancer 2、Client 1、Client 2。

但这就是我想要实现的目标：

如何：而不是显示所有name，我想name根据userType所选内容显示具体内容。例如：如果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="" />
                        <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>
    );
};

应用截图： 在此处输入图像描述

4

1 回答 1

1

您应该具有根据用户类型返回用户名的功能

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" />]
     }
}

然后在渲染函数中你可以调用我喜欢

 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>
);
 };
于 2020-01-06T08:24:27.873 回答