基于Taro-UI二次封装的选择器

在Taro-UI中的Picker组件中，当选择了某个选项后，可以得到的是选择了的range 中的第几个，即为索引，比如选择器中的内容如下careSelector，若选择的是一对一，则返回的结果得到的为0，而我真正想要的是它所对应的value的值，对此，就对picker重新进行了封装。

const careSelector=[
 {
   value:1,
   label:'一对一'
 },{
   value:2,
   label:'一对多'
 }
]

 组件实现：

// AdvancedSelect.js

import {Picker, View} from "@tarojs/components";
import {Component} from "react";
import PropTypes from "prop-types";
import './AdvancedSelect.less'

class AdvancedSelect extends Component{
  static propTypes = {
    dataSource: PropTypes.array.isRequired,
    onSuperChange:PropTypes.func.isRequired,
    infoText:PropTypes.string.isRequired,
  };

  constructor(props) {
    super(props);
    this.state={
      selectLabel:"",
    }
  }
  componentDidMount() {
    this.getLabelFromValue();
  }

  componentDidUpdate(prevProps) {
    if (prevProps.defaultValue !== this.props.defaultValue) {
      this.getLabelFromValue();
    }
  }
  getLabelFromValue=()=>{
    const {dataSource=[],defaultValue="",valueType,textType} =this.props;
    let label=0;
    for(let i=0;i<dataSource.length;i++){
      if(defaultValue==dataSource[i][valueType]){
        label=dataSource[i][textType];
        break;
      }
    }
    this.setState({selectLabel:label||''});
  }
  onSelectChange=(e)=>{
    const {onSuperChange,dataSource=[],valueType,textType} =this.props;
    this.setState({selectLabel:dataSource[e.detail.value][textType]}||'')
    onSuperChange(dataSource[e.detail.value][valueType]);
  }
  render() {
    const {dataSource=[],infoText,textType,disabled,defaultValue} =this.props;
    const {selectLabel=''}= this.state;
    return (
      <>
        <View className='GetInfo'>
          <View className='GetInfoText'>{infoText}</View>
          <View className='GetInfoInput'>
            <Picker mode='selector'  range={dataSource} rangeKey={textType} onChange={this.onSelectChange} disabled={disabled}>
              <View className='PickerStyle'>
                {"\u00a0" + selectLabel}
              </View>
            </Picker>
          </View>
        </View>
      </>
    )
  }
}


export  default AdvancedSelect;

//AdvancedSelect.less

.ApplyInfoBox {

  #ApplyInfoHeader {
    width: 100%;
    height: 100rpx;
  }
}

.GetInfo{
  box-sizing: border-box;
  display: flex;
  font-size:small;
  justify-content: space-between;
  width: 100%;
  line-height: 100rpx;
  background: white;
  border-bottom: 1rpx solid rgba(141, 141, 141, 0.14);
  .GetInfoInput{
    width: 60%;
    margin-right: 20rpx;
    .PickerStyle{
      text-align: right;
      font-size: 32rpx;
    }
  }
  .GetInfoText{
    //display: flex;
    width: 40%;
    margin-left: 20rpx;
    font-size: 32rpx;
  }
  .payStyle{
    color: red;
    font-weight:bold;
    font-size: 36rpx;
    margin-right: 20rpx;
  }
}

 组件调用：

<AdvancedSelect
   infoText='陪护类型'
   dataSource={careSelector}
   valueType='value'
   extType='label'
   onSuperChange={(value) => this.handleCareTypeChange({careType:parseInt(value)})}
/>

 参数说明：

参数名称	是否必须	类型	说明
dataSource	必须	array	选择器展示的数据
valueType	必须	string	dataSource中返回数据的字段名
textType	必须	string	dataSource中返回数据显示文本的字段名
onSuperChange	必须	function	选择器点击选择事件
infoText	必须	string	选择器文本描述信息
defautValue	不必须	string	选择器默认值value

 参考文档：

Taro-UI官网