reactjs - Reactjs 和 redux-form：无法在 redux-form 中包装的 react-select 组件中使用 onChange 或 onBlur

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}
    );

主页.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; 

在上面的程序中，正如我提到的，我只想在更改包装的 react-select 中的值时显示“成功”警报。请指导。

谢谢， 沙什

Answer 1

您必须包装主页组件：

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