React Native - 连接来自 'react-native-picker-select' 的两个 RNCPickerSelect

Question

当我 select 编辑了另一个 'RNCPickerSelect' 的值时，如何更改 'RNCPickerSelect' 的 'items'？

例如，当我 select 来自 RNCPickerSelect 的一个名为 'brand' 的值时，other RNCPickerSelect 显示与特定 'brandName' 关联的 'models'。基本上，我希望 other RNCPickerSelect 中的 'items' 受到第一个 RNCPickerSelect[=26= 的影响].

代码如下：

================================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' }, ]} ==========================================================================

谢谢！

Answer 1

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

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

Answer 2

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

 )

}

React Native - 连接来自 'react-native-picker-select' 的两个 RNCPickerSelect

React Native - Connecting Two RNCPickerSelect's from 'react-native-picker-select'

picker

react-native