Question

我安装了 https://www.npmjs.com/package/react-native-modal-dropdown 以获得下拉功能。我自己制作了一个名为 DropDown.js 的组件，它有一个 Text 和我刚刚安装的 ModalDropdown，它的实现是：

function DropDown({ title, options }) {

    const [noOfInd, setNoOfInd] = useState(1);

    return (
        <View>

            {/* npm i https://github.com/siemiatj/react-native-modal-dropdown */}

            <Text style={styles.fieldTitle}>{title}</Text>
            <ModalDropdown
                options={options}
                defaultIndex={0}
                defaultValue={options[0]}
                style={styles.dropDownField}
                textStyle={{ fontSize: 14, }}
                dropdownStyle={styles.dropDown}
                dropdownTextStyle={{ color: color.black, fontWeight: 'bold' }}
                dropdownTextHighlightStyle={{ color: color.linkColor }}
                onSelect={(index, value) => {
                    setNoOfInd(value)
                }} />
        </View>
    );
}

我使用这个组件来在整个应用程序中显示下拉列表。现在我想取回 noOfInd 的值。例如，我有另一个类 UserInfoScreen.js:

function UserInfoScreen({ navigation }) {
            <DropDown 
              title={'Select Number of individuals'}
              options={['1', '2', '3', '4', '5']} 
            />

            <MainActionButton title={'Continue'} pressEvent={() => {
                navigation.navigate('Individuals Infomation', {
                    totalIndividuals: 3,
                });
            }} />
}

此处显示 totalIndividuals: 3 我想传递 noOfInd 的值而不是 3。那么，我如何获得它？

Answer 1

试试这样的函数

function UserInfoScreen({ navigation }) {
     const [selectedOption, setSelectedOption] = React.useState(1);
     ....

            <DropDown 
              title={'Select Number of individuals'}
              options={['1', '2', '3', '4', '5']} 
              onSelectOption = {(item) => setSelectedOption(item)} //function to get selected option
            />

            <MainActionButton title={'Continue'} pressEvent={() => {
                navigation.navigate('Individuals Infomation', {
                    totalIndividuals: selectedOption,
                });
            }} />
}

在下拉类中

function DropDown({ title, options,onSelectOption }) {

    const [noOfInd, setNoOfInd] = useState(1);

    return (
        <View>

            {/* npm i https://github.com/siemiatj/react-native-modal-dropdown */}

            <Text style={styles.fieldTitle}>{title}</Text>
            <ModalDropdown
                options={options}
                defaultIndex={0}
                defaultValue={options[0]}
                style={styles.dropDownField}
                textStyle={{ fontSize: 14, }}
                dropdownStyle={styles.dropDown}
                dropdownTextStyle={{ color: color.black, fontWeight: 'bold' }}
                dropdownTextHighlightStyle={{ color: color.linkColor }}
                onSelect={(index, value) => {
                    setNoOfInd(value)
                    onSelectOption(value) //call the function
                }} />
        </View>
    );
}

将数据从组件传递到父屏幕

1 个答案: