React 使用Picker选择器实现单项选择列表

最新推荐文章于 2025-06-06 09:21:42 发布

幸福了，然后呢

最新推荐文章于 2025-06-06 09:21:42 发布

阅读量3.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： React 文章标签： react

本文链接：https://blog.youkuaiyun.com/weixin_42260975/article/details/104479566

本文介绍了如何在React中使用Picker选择器实现单项选择功能。通过选择不同选项，按顺序展示对应的文字数据。实现过程中，针对数据源的处理进行了说明，特别是将选择的数值转化为对应的文本展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

React 使用Picker选择器实现单项选择列表

一、功能描述
效果描述：通过选择不同的选项，按对应的选择顺序展示数据
效果图：
在这里插入图片描述
二、实现方法

<Picker data={
   
   orderData}   // 数据源
        cols={
   
   1}  //列数
        value={
   
   _self.state.sValue}  //值
        onOk={
   
   v => _self.setState({
   
    sValue: v },_self.chooseOrder(v))}  //点击选中时执行的回调
>
        <span className="choose">{
   
   _self.state.word}<Icon type="down" className="downbtn" /></span>  //对应上图中“本周运营详情”右侧红框内容
</Picker