Блог

Как мне изменить ‘элементы’ из ‘RNCPickerSelect’, когда я выбрал значение из другого ‘RNCPickerSelect’?

Например, когда я выбираю значение с именем ‘brand’ из RNCPickerSelect, другой RNCPickerSelect отображает ‘модели’, связанные с этим конкретным ‘именем бренда’. В принципе, я хочу, чтобы на «элементы» из другого RNCPickerSelect влиял первый RNCPickerSelect.

Вот код:

 ================================Brands===================================
<RNPickerSelect
            pickerProps={{ style: {overflow: 'hidden' } }}
            onValueChange={(value) => console.log(value)}
            placeholder={brandplaceholder}
  //           style={styles.dropbox}
            items={[
            { label: 'brand1', value: 'brand1' },
            { label: 'brand2', value: 'brand2' },
            { label: 'brand3', value: 'brand3' },
            ]}
            onValueChange={(val) => setBrand(val)}
          />
==========================================================================

=================================Models===================================
<RNPickerSelect
            pickerProps={{ style: {overflow: 'hidden' } }}
            onValueChange={(value) => console.log(value)}
            placeholder={brandplaceholder}
  //           style={styles.dropbox}
            items={[
            { label: 'model1', value: 'model1' },
            { label: 'model2', value: 'model2' },
            { label: 'model3', value: 'model3' },
            ]}
            onValueChange={(val) => setModel(val)}
          />
==========================================================================

===============================Model Ideas================================
            items={[
            { label: 'model4', value: 'model4' },
            { label: 'model5', value: 'model5' },
            { label: 'model6', value: 'model6' },
            ]}
                            **and**
            items={[
            { label: 'model7', value: 'model7' },
            { label: 'model8', value: 'model8' },
            { label: 'model9', value: 'model9' },
            ]}
==========================================================================
  

Спасибо!

С помощью кодов, предоставленных @FreakyCoder, я успешно исправил и улучшил ‘RNCPickerSelect’. Я скорректировал код, чтобы он соответствовал моему проекту, а также добавил несколько дополнительных строк кодов. Еще раз спасибо @FreakyCoder!

Примеры кодов:

 export default function MainPage() {
//===============Example Selections===============//
  const firstPick = [
    { label: 'Football', value: 'football' },
    { label: 'Baseball', value: 'baseball' },
    { label: 'Hockey', value: 'hockey' },
  ];

  const secondPick = [
    { label: 'Football2', value: 'football2' },
    { label: 'Baseball2', value: 'baseball2' },
    { label: 'Hockey2', value: 'hockey2' },
  ];

  const thirdPick = [
    { label: 'Football3', value: 'football3' },
    { label: 'Baseball3', value: 'baseball3' },
    { label: 'Hockey3', value: 'hockey3' },
  ];
//================================================//

  const [dynamicPickerArr, setDynamicPickerArr] = useState(HondaModel)

  return(
    <RNPickerSelect
        onValueChange={(value) =>  { setModel(value)

        // Magic here
        // Your changed value logic should be here

        if(value=='football') 
        return Football=setDynamicPickerArr(thirdPick)

        else if(value=='baseball')
        return Baseball=setDynamicPickerArr(secondPick)

        else if(value=='hockey')
        return Baseball=setDynamicPickerArr(firstPick)
   }
              
    }
        items={[
        { label: 'Football', value: 'football' },
        { label: 'Baseball', value: 'baseball' },
        { label: 'Hockey', value: 'hockey' },
        ]}
  />

  <RNPickerSelect
      onValueChange={(value) => console.log(value)}
      items={dynamicPickerArr}
  />

 )

}
  

вы можете сделать это с помощью простой логики состояния. При выборе первого средства выбора он обновит массив предопределенных элементов другого средства выбора.

 import React from "react";
import RNPickerSelect from 'react-native-picker-select';

const firstPick = [
                { label: 'Football', value: 'football' },
                { label: 'Baseball', value: 'baseball' },
                { label: 'Hockey', value: 'hockey' },
            ]

const secondPick = [[
                { label: 'Football2', value: 'football2' },
                { label: 'Baseball2', value: 'baseball2' },
                { label: 'Hockey2', value: 'hockey2' },
            ]

export const Dropdown = () => {
    
   const [dynamicPickerArr, setDynamicPickerArr] = useState(firstPick)

    return (
        <RNPickerSelect
            onValueChange={(value) => {
                 // Magic here
                 // Your changed value logic should be here
                 setDynamicPickerArr(secondPick)}
             }
            items={[
                { label: 'Football', value: 'football' },
                { label: 'Baseball', value: 'baseball' },
                { label: 'Hockey', value: 'hockey' },
            ]}
        />
         <RNPickerSelect
            onValueChange={(value) => console.log(value)}
            items={}
        />
    );
};