用json文件做下拉框的内容和值

用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 || ''
        })
      })
    })
  }