React Native Picker: установить и получить разные значения Picker - PullRequest
Новая
       14

React Native Picker: установить и получить разные значения Picker

0 голосов
/ 06 января 2020

Я работаю с React Native Picker и создал два состояния: userType и name.

Однако есть два userType: Фрилансер , Клиент . Есть также два name для каждого userType, а именно: Фрилансер 1 , Фрилансер 2 и Клиент 1 , Клиент 2 .

В настоящее время у меня есть два сборщика. Один имеет userType, а другой - name. Независимо от выбранного userType, во втором сборщике отображаются все name, то есть Фрилансер 1, Фрилансер 2, Клиент 1, Клиент 2.

Но это то, чего я пытаюсь достичь:

КАК : Вместо того, чтобы показывать все name, я хочу показать спецификацию c 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>
    );
};

Снимок экрана приложения: enter image description here

1 Ответ

1 голос
/ 06 января 2020

у вас должна быть функция, которая возвращает имена пользователей в зависимости от типа пользователя 

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

, тогда внутри функции рендеринга вы можете вызвать 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>
);
 };
...