React native 反应本机-从“反应本机选择器选择”连接两个RNCPickerSelect

当我从另一个“RNCPickerSelect”中选择了一个值时，如何从“RNCPickerSelect”中更改“items”

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

---

谢谢

您可以通过一个简单的状态逻辑来实现这一点。当第一个选择器选择时，它将更新另一个选择器的预定义项数组

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={}
        />
    );
};

---

通过@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}
  />

 )

}

---

忽略我的最后一个问题，我已经知道怎么做了！非常感谢！还有一个问题，如何在“onValueChange”上实现多个值？例如，当我从第一个“RNCPickerSelect”中选择值“Football”时，我希望另一个显示“firstPick”中的项目，以及“secondPick”中的“basketball”项目，依此类推。再次感谢大家的回应和帮助！