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

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>

关于数据源：

const orderData = [{value: "1",label: "按时间由新到旧"},{value: "2",label: "按时间由旧到新"},{value: "3",label: "按里程由高到低"},{value: "4",label: "按里程由低到高"},{value: "5",label: "按平均油耗由高到低"},{value: "6",label: "按平均油耗由低到高"},{value: "7",label: "按平均车速由高到低"},{value: "8",label: "按平均车速由低到高"}
]

注：onOk={v => _self.setState({ sValue: v },_self.chooseOrder(v))}这里面的v打印出来的值是：[“1”]这样的形式，而页面展示需要的是文字样式：“按…”，所以我这里做了文字转化：

chooseOrder=(n)=>{this.setState({caritemlist: []})if(n == "1"){sortType = "1"this.setState({word:"按时间由新到旧"})}else if(n == "2"){sortType = "2"this.setState({word:"按时间由旧到新"})}else if(n == "3"){sortType = "3"this.setState({word:"按里程由高到低"})}else if(n == "4"){sortType = "4"this.setState({word:"按里程由低到高"})}else if(n == "5"){sortType = "5"this.setState({word:"按平均油耗由高到低"})}else if(n == "6"){sortType = "6"this.setState({word:"按平均油耗由低到高"})}else if(n == "7"){sortType = "7"this.setState({word:"按平均车速由高到低"})}else if(n == "8"){sortType = "8"this.setState({word:"按平均车速由低到高"})}}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！