背景

目前成都創(chuàng)新互聯(lián)公司已為1000+的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)頁空間、成都網(wǎng)站托管、企業(yè)網(wǎng)站設(shè)計、沙河網(wǎng)站維護等服務(wù)，公司將堅持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

肯定是最近有一個項目，需要一個二級聯(lián)動功能了！

本來想封裝完整之后，放在github上面賺星星，但發(fā)現(xiàn)市面上已經(jīng)有比較成熟的了，為什么我在開發(fā)之前沒去搜索一下（項目很趕進度），淚崩啊，既然已經(jīng)封裝就來說說過程吧

任務(wù)開始

一. 原型圖或設(shè)計圖

在封裝一個組件之前，首先你要知道組件長什么樣子，大概的輪廓要了解

二. 構(gòu)思結(jié)構(gòu)

在封裝之前，先在腦海里面想一下

1. 這個組件需要達到的功能是什么？

改變一級后，二級會跟著變化，改變二級，三級會變，以此類推，可以指定需要選中的項，可以動態(tài)改變每一級的值，支持按需加載

2. 暴露出來的API是什么？

// 已封裝的組件（Pickers.js）
import React, { Component } from 'react'
import Pickers from './Pickers'

class Screen extends Component {
 constructor (props) {
  super(props)
  this.state = {
   defaultIndexs: [1, 0], // 指定選擇每一級的第幾項，可以不填不傳，默認為0(第一項)
   visible: true, // 
   options: [ // 選項數(shù)據(jù)，label為顯示的名稱，children為下一級，按需加載直接改變options的值就行了
    {
     label: 'A',
     children: [
      {
       label: 'J'
      },
      {
       label: 'K'
      }
     ]
    },
    {
     label: 'B',
     children: [
      {
       label: 'X'
      },
      {
       label: 'Y'
      }
     ]
    }
   ]
  }
 }
 onChange(arr) { // 選中項改變時觸發(fā), arr為當前每一級選中項索引，如選中B和Y，此時的arr就等于[1,1]
  console.log(arr)
 }
 onOk(arr) { // 最終確認時觸發(fā)，arr同上
  console.log(arr)
 }
 render() {
  return (
   
    
    
   
  )
 }
}

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

新聞標題：自己動手封裝一個ReactNative多級聯(lián)動-創(chuàng)新互聯(lián)
當前地址：http://weahome.cn/article/cssojo.html