app-base-web/src/library/select/index.js

web development common base package.

import React from 'react';
import { Select } from 'antd';
import axios from '../util-axios';

const Option = Select.Option;
//value必须转换为字符串
export default class MySelect extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      valueKey: "id",
      textKey: "name",
      hasNullVal: this.props.hasNullVal === false ? false : true,
      nullValue: this.props.nullValue || "",
      nullText: this.props.nullText || "请选择",
      data: []
    }
    this.initData()
  }

  async initData() {
    if (this.props.url) {
      let rs = await axios.get(this.props.url, this.props.params || {});
      this.setState({ data: rs.data })
    }
  }
  init() {
    const rows = [];
    if (this.props.url) {
      this.state.hasNullVal && rows.push(<Option key="-1" value={this.state.nullValue}>{this.state.nullText}</Option>);
      if (!this.state.data) return rows;
      var len = this.state.data.length;
      for (let i = 0; i < len; i++) {
        let item = this.state.data[i];
        let value = item[this.state.valueKey]
        let text = item[this.state.textKey];
        rows.push(<Option key={value} title={text} >{text}</Option>);
      };
    } else {
      var len = this.props.data.length;
      if (this.props.data[0] instanceof Object) {
        for (let i = 0; i < len; i++) {
          let item = this.props.data[i];
          let value = item[this.state.valueKey]
          let text = item[this.state.textKey];
          rows.push(<Option key={value} title={text}>{text}</Option>);
        }
      } else {
        for (let i = 0; i < len; i++) {
          let value = this.props.data[i];
          rows.push(<Option key={value} title={value}>{value}</Option>);
        }
      }
    }
    return rows;
  }
  render() {
    let _showSearch = this.props.showSearch == false ? false : true;
    return (
      <Select className="app-select" {...this.props} virtual={false} showSearch={_showSearch} optionFilterProp="title">
        {this.init()}
      </Select>
    );
  }
}