Reactjs和redux-form：無法在包裝的react-select組件中使用onChange或onBlur以redux形式

Question

我使用的是react-select組件，由於我使用的是redux-form庫和它的字段，我必須將react-select和在redux-form字段中使用它來提交表單值。像這樣<Field name="customselect" component={RenderSelectInput} />。但是，當我使用包裝的react-select組件時，我無法使用自定義onChange和onBlur函數。像這樣<Field name="customselect" component={RenderSelectInput} onChange={this.handleChange}/>

這是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; 

在上面的程序，正如我所說，我只是想顯示 「成功」 警報在包裹onchanging值反應選。請指導。

感謝， 詞shash

Answer 1

您必須包裝網頁組件：

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