react-admin-lte/lib/InputSelect.js

简单封装的 AdminLTE react 类库，并包含一个编译配置。

import React from 'react';
import InputBase from './InputBase';


export default class InputSelect extends React.Component {

  constructor(props, context) {
    super(props, context);
    this.onChange = this.onChange.bind(this);
  }

  onChange(e) {
    if (this.props.onValueChange) {
      let val;
      val = [].slice.call(
        e.target.selectedOptions).map(o => {
          return o.value;
        });
      if (!this.props.multiple) {
        val = val[0];
      }
      this.props.onValueChange(this.props.name, val);
    }
    if (this.props.onChange) {
      this.props.onChange(e);
    }
  }

  render() {
    var options =
      this.props.options ? this.props.options.map(function (ele, xidx) {
        return (
          <option key={xidx} value={ele.value}>
            {ele.label}
          </option>
        );
      }) : this.props.children;


    var seleHtml;
    if (this.props.multiple) {
      seleHtml =
        <select className="form-control" multiple="multiple" disabled={this.props.disabled}
          name={this.props.name} id={this.props.name}
          onChange={this.onChange}
          defaultValue={this.props.defaultValue}
          value={this.props.value}>
          {options}
        </select>;
    } else {
      seleHtml =
        <select className="form-control" disabled={this.props.disabled}
          name={this.props.name} id={this.props.name}
          onChange={this.onChange}
          defaultValue={this.props.defaultValue}
          value={this.props.value}>
          {options}
        </select>;
    }

    return <InputBase label={this.props.label} name={this.props.name}>
      {seleHtml}
    </InputBase>;
  }

}