react-select-redux-form.js

import 'react-select/dist/react-select.css';
import React from 'react';
import { Field, reduxForm } from 'redux-form';
import Select from 'react-select';

const transValue = (value) => ({ label: value, value });

const Input = ({ input, options = [], showDropdown = false }) => {
  return <Select.Creatable
    inputProps={input}
    options={options} 
    noResultsText={showDropdown} 
    arrowRenderer={showDropdown ? undefined : null}
    // promptTextCreator={() => null}
    value={transValue(input.value)}
    clearable={false}
    onBlurResetsInput={false}
    onSelectResetsInput={false}
    simpleValue={true}
    onChange={(value) => {
      input.onChange(value);
    }}
    onBlur={(event) => {
      console.log(event.target.value);
      input.onBlur(event.target.value);
    }}
    onFocus={input.onFocus}
    />
};

const options = [
  { label: 'AA', value: 'aaa' },
  { label: 'BB', value: 'bbb' },
  { label: 'CC', value: 'ccc' },
];

const SimpleForm = props => {
  const { handleSubmit, pristine, reset, submitting } = props;
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>First Name</label>
        <div>
          <Field
            name="firstName"
            component={Input}
            options={[]}
            type="text"
            placeholder="First Name"
          />
        </div>
      </div>
      <div>
        <label>Last Name</label>
        <div>
          <Field
            name="lastName"
            component="input"
            type="text"
            placeholder="Last Name"
          />
        </div>
      </div>
      <div>
        <label>Email</label>
        <div>
          <Field
            name="email"
            component="input"
            type="email"
            placeholder="Email"
          />
        </div>
      </div>
      <div>
        <label>Sex</label>
        <div>
          <label>
            <Field name="sex" component="input" type="radio" value="male" />
            {' '}
            Male
          </label>
          <label>
            <Field name="sex" component="input" type="radio" value="female" />
            {' '}
            Female
          </label>
        </div>
      </div>
      <div>
        <label>Favorite Color</label>
        <div>
          <Field name="favoriteColor" component="select">
            <option />
            <option value="ff0000">Red</option>
            <option value="00ff00">Green</option>
            <option value="0000ff">Blue</option>
          </Field>
        </div>
      </div>
      <div>
        <label htmlFor="employed">Employed</label>
        <div>
          <Field
            name="employed"
            id="employed"
            component="input"
            type="checkbox"
          />
        </div>
      </div>
      <div>
        <label>Notes</label>
        <div>
          <Field name="notes" component="textarea" />
        </div>
      </div>
      <div>
        <button type="submit" disabled={pristine || submitting}>Submit</button>
        <button type="button" disabled={pristine || submitting} onClick={reset}>
          Clear Values
        </button>
      </div>
    </form>
  );
};

export default reduxForm({
  form: 'simple', // a unique identifier for this form
})(SimpleForm);