react-WeUI及相关组件的运用

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_30101879/article/details/78373524

1.react-weui之picker组件的运用；

第一步，上官网文档：

Picker

Mobile select ui, currently only support Touch Events

Props

Name	Type	Defaults	Details
actions	array	[]	consists of array of object(max 2) with property label and others pass into element
defaultSelect	array		default group index thats selected, if not provide, automatic chose the best fiting item when mounted
groups	array	[]	array objects consists of groups for each scroll group
lang	object		language object consists of leftBtn andrightBtn
onCancel	func		excute when the popup about to close
onChange	func		on selected change, pass property selected for array of slected index togroups
onGroupChange	func		trigger when individual group change, pass property(item, item index in group, group index in groups, selected,picker instance)
show	bool	false	display the component

从官网文档中可以得知：语言（lang）是一个对象，它分为左右两个键，左键（leftBtn）和右键（rightBtn）进行设置，那么接下来怎么设置对象的属性，在哪里设置这是一个关键性的问题；

如果没有涉及到子父级组件传值的话，state设置，一般设置语言是不会涉及到子父级传值问题；

所以接下来上代码：

 this.state={
          
            picker_lang:{
            	leftBtn:'取消',
            	rightBtn:'确定'
            }
        }

设置react-weui中的默认值为第一项通过defaultSelect
defaultSelect={Array(this.state.picker_group.length).fill(0)}

默认值的选项中，Array.fill(),表示数组的填充，接下来我将为大家讲解该数组是如何填充的，接下来，我将用代码演示：

		var arr = [0,0,1,2,3];
		arr.fill(2);
		console.log(arr)//[2,2,2,2,2]

表示为一个值时，fill中的参数会将数组所有的元素，全部填充为2；

接下来也会为大家演示为两个参数是怎样填充的，请欣赏下面的代码：

var arr = [0,0,1,2,3];
		arr.fill(2,2);
		console.log(arr)//[0,0,2,2,2]

表示数组从数组的第三位的开始填充第一个参数；

var arr = [0,0,1,2,3];
arr.fill(1,2,4);
console.log(arr)//[0,0,1,1,3]

fill（a，b，c）表示从b填充a的数值到c(不包括c)；
这就是reactweui中picker组件运用的属性值