Reactjs and redux-form: Unable to use onChange or onBlur in wrapped react-select component in redux-form

Question

I am using react-select component, Since I am using redux-form library and it's fields, I have to wrap the react-select and use it in redux-form field to submit the form values. Like this <Field name="customselect" component={RenderSelectInput} /> . However I am unable to use custom onChange and onBlur functions when I used wrapped react-select component. Like this <Field name="customselect" component={RenderSelectInput} onChange={this.handleChange}/>

This is RenderSelectInput.js

import React, {PropTypes} from 'react';
import Select from 'react-select';
import 'react-select/dist/react-select.css';

export default (props) => (
    <Select {...props}
        value = {props.input.value}
        onChange = {(value) => props.input.onChange(value) }
        onBlur = {() => props.input.onBlur(props.input.value) }
        options = {props.options}
    );

homepage.js

import React, {Component} from 'react';
import { Field, reduxForm} from 'redux-form';
import RenderSelectInput from './RenderSelectInput';

class homepage extends Component {
    constructor(props) {
        super(props);
        this.handleChange = this.handleChange.bind(this);
    }


    handleChange(event) {
        alert("success");
    }

    render() {

        const options = [{ value: 'value1', label: 'sample1' }, { value: 'value2', label: 'sample2' }];

        return (

            <div>
                <Field name="customselect" component={RenderSelectInput} onChange={this.handleChange} options={options} />
            </div>
        )
    }
}


export default homepage; 

In above program , as I mentioned I just want to display "success" alert onchanging the value in wrapped react-select. Please guide.

Thanks, Shash

Answer 1

You have to wrap the homepage component:

export default reduxForm({
  form: 'some form' // a unique name for this form
})(homepage);