2018-03-15 react-select

disassembly.png 屏幕快照 2018-03-14 19.01.28.png

              <div className="w-50">
                <InputSelectBox title="PRODUCTION ORDER TYPE"
                                value={typeId}
                                disabled = { !editMode }
                                resetValue={  undefined  }
                                clearable={  false  }
                                onChange={ (e) => actions.changeOrderType(e.value) }
                                options={  options  }/>
              </div>

export const changeOrderType = (value) => ({
  type: actionTypes.CHANGE_PRODUCTION_ORDER_TYPE,
  value
});   

  [actionTypes.CHANGE_PRODUCTION_ORDER_TYPE]: (state, action) => {
    return { ...state, typeId: action.value };
  },   

Library react-select
https://github.com/JedWatson/react-select

import PropTypes from 'prop-types';
import React, { Component } from 'react';
import Select from 'react-select';


import '../input-box/input-box.scss';
import './input-select-box.scss';

export default class InputSelectBox extends Component {
  static propTypes = {
    title: PropTypes.string,
    containerClass: PropTypes.string
  };

  static defaultProps = {
    onChange: () => {},
    containerClass: ''
  };

  render() {
    const { title, containerClass } = this.props;

    return (
      <div className={ `input-box ${containerClass}` }>
        { (title != false) && <p className="input-box__title">{ title }</p> }
        <Select { ...this.props }/>
      </div>
    );
  }
}