react-native - Nativebase Picker Item 未显示 Selected 值

标签 react-native native-base

我正在尝试从选择器项目中选择项目。问题是当我点击项目然后点击函数处理程序时 onValueChangeJob(value)执行一些任务

onValueChangeJob(value) {
    this.setState({ jobValue: value.jobTitle})
       USE value.number form another task
    });
}

下面是我的选择器组件
<Picker
 style={commonStyle.pickerStyle}
 textStyle={commonStyle.textStylePicker}
 headerTitleStyle={commonStyle.headerTitleStyle}
 headerBackButtonTextStyle={commonStyle.headerBackButtonTextStyle}
 iosIcon={<Icon name="ios-arrow-down" />}
 mode="dropdown"
 placeholder="MAKE A SELECTION"
 placeholderStyle={commonStyle.placeholderStyle}
 note={false}
 itemTextStyle={commonStyle.itemTextStyle}
 selectedValue={this.state.jobValue}
 onValueChange={this.onValueChangeJob.bind(this)}
 >
 {jobItems}                                    
</Picker>

而来自在 render() 函数中创建的 map 的 jobitems
jobItems = this.state.jobTypesList.map((v,i) => {
    return <Picker.Item key={i} value={v} label={v.jobTitle} />
});

所以在这里,如果我直接在 picker.item props value-{v.jobTitle} 中使用,则选择的值会发生变化,但我想在 onValueChangeJob(value) 函数中使用整个对象 v。一件事状态更新但无法在选择器的选定值上显示
尝试了很多不同的事情,但没有发生我想要的事情。
我应该如何用适当的例子来处理这个问题,因为我是 React Native 的新手。

看看我的选择器在这张图片中的样子

Look How My Picker look in this image

最佳答案

在对一个解决方案进行大量谷歌搜索后,我发现我必须在 onValueChange 处理程序上过滤 this.state.jobTypesList 这个数组并抓取特定工作标题的对象

return this.state.jobTypesList.map((v,i) => {
            return <Picker.Item key={i} value={v.jobTitle} label={v.jobTitle} 
        });

let filterArray = this.state.jobTypesList.filter((v) => v.jobTitle === value)[0]
filterArray.jobTitle
filterArray.jobNumber

关于react-native - Nativebase Picker Item 未显示 Selected 值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54868801/

相关文章:

ios - 无法在 React Native iOS 模拟器中按 URI 显示图像

android - E/SoLoader : couldn't find DSO to load: libjscexecutor. 所以

react-native - Native Base Picker 项目的条件渲染 [React Native]

javascript - 当我们到达列表底部时,React Native FlatList 加载更多

typescript - 在堆栈之间导航时 React Navigation 5 类型错误

javascript - 通过 prop 自定义组件中的动态文本

checkbox - react native ListView

reactjs - 我可以将 NativeBase 与 Mobx 一起使用吗?

javascript - native 基础 3 : Onpress for MenuItem

javascript - 使用 react-native-router-flux 与 nativebase