下拉框 基础hrml

下拉框

一、html+react基础版

部分代码

// 初始化数据
constructor(options) {
    super(options);
    this.state = {
        Province: 1
    }
}

// 获取表单的值 并传给state
handlerChange = (e) => {
    this.setState({
        [e.target.name]: e.target.value  //省份value值
    })
        console.log(e.target.options[e.target.selectedIndex].text)  //省份中文
}


<select
    name="Province"
    id="Province"
    onChange={this.handlerChange}
    value={this.state.Provinde}
>
    <option value="1">北京</option>
    <option value="2">上海</option>
    <option value="3">河北</option>
    <option value="4">山东</option>
    <option value="5">山西</option>
</select>

<div>省份:{this.state.Province}</div>

二、ant框架版

部分代码

import { Cascader } from 'antd'//组件：ant
import typeIp from '../assets/json/typeIp.json' //数据：设备类型和默认IP对应关系

let dataTree = [] //设备类型与默认IP对应关系树

constructor(props) {
  super(props)
  this.state = {
    message: { 
      equipmentType: ''
    }
  }
}


componentDidMount() {
  dataTree = typeIp
}

 <Cascader className="input" options={dataTree} onChange={this.handleTypes} placeholder="请选择设备类型" />}

 // 获取设备类型选项  根据设备类型 获取设备类型和默认ip
  handleTypes = (value, data) => {
    this.setState(preState => {
      return Object.assign({}, preState, {
        message: Object.assign({}, preState.message, {
          equipmentType: data[0] && data[0].label || '',
        })
      })
    })
  }