React Native-从'react-native-picker-select'连接两个RNCPickerSelect

问题描述

当我从另一个'RNCPickerSelect'中选择了一个值时，如何更改'RNCPickerSelect'中的'items'？

例如，当我从 RNCPickerSelect 中选择一个名为“ brand”的值时， other RNCPickerSelect 将显示与该特定的“ brandName”。基本上，我希望 other 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',]}
  />

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

 )

}

,

您可以使用简单的状态逻辑来做到这一点。当第一个选择器选择时，它将更新另一个选择器的预定义项目数组。

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

const firstPick = [
                { label: 'Football',]

const secondPick = [[
                { label: 'Football2',]

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',]}
        />
         <RNPickerSelect
            onValueChange={(value) => console.log(value)}
            items={}
        />
    );
};