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

【问题标题】：Reactjs and redux-form: Unable to use onChange or onBlur in wrapped react-select component in redux-formReactjs 和 redux-form：无法在 redux-form 中包装的 react-select 组件中使用 onChange 或 onBlur
【发布时间】：2017-03-21 10:27:50
【问题描述】：

我使用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 中的值时显示“成功”警报。请指导。

谢谢，沙什

【问题讨论】：

标签： reactjs redux react-redux redux-form react-select

【解决方案1】：

你必须包装主页组件：

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

【讨论】：