用json檔案做下拉框的內容和值

一、前言

最近在做一個app，裡面有個表單，用到了下拉框，而下拉框的值和內容，按照常理說，是從伺服器下載的，但是我這個app比較特殊，暫時不聯網，且下拉資料固定，所以，下拉資料存放於json檔案中。
下面介紹我這個app的下拉框製作程式碼
用到的元件：antdesign的Cascader元件

二、程式碼展示

1.typeIp.json

[{
		"label": "數控裝置",
		"value": "192.168.xxx.001"
	},
	{
		"label": "機器人",
		"value": "192.168.xxx.002"
	},
	{
		"label": "注塑機",
		"value": "192.168.xxx.003"
	},
	{
		"label": "其他",
		"value": "192.168.xxx.004"
	}
]
 

2.使用下拉框的頁面.js

import { Cascader } from 'antd'//元件：ant
import typeIp from '../assets/json/typeIp.json' //資料：裝置型別和預設IP對應關係
let dataTree = [] //裝置型別與預設IP對應關係樹
let thisEquipmentType = []//用於修改裝置型別時回顯裝置型別用

 // 建構函式
  constructor(props) {
    super(props)
    this.state = {
      message: { // 填寫的資料
        boxId: '',
        equipmentType: '',
        productModel: '',
        name: '',
        ip: '',
        line: '',
      },
    }
  }
 

  componentDidMount() {
    //獲取json檔案中  裝置型別與預設IP的對應關係  用於下拉選擇
    dataTree = typeIp
    //thisEquipmentType,用於回顯裝置型別
    thisEquipmentType[0] = reciveData.oneMessage.equipmentType
  }

//render
<div className="row">
      <div className="text">裝置型別：</div>
      {flag === "add" && <Cascader className="input" options={dataTree} onChange={this.handleTypes} placeholder="請選擇裝置型別" />}
      {flag === "change" && <Cascader className="input" options={dataTree} defaultValue={thisEquipmentType} onChange={this.handleTypes} placeholder="請選擇裝置型別" />}
    </div>
 

// 獲取裝置型別選項  根據裝置型別 獲取裝置型別和預設ip
  handleTypes = (value, data) => {
    this.setState(preState => {
      return Object.assign({}, preState, {
        message: Object.assign({}, preState.message, {
          equipmentType: data[0] && data[0].label || '',
          ip: data[0] && data[0].value || ''
        })
      })
    })
  }