Question

我正在使用redux-form组件，因为我正在使用<Field name="customselect" component={RenderSelectInput} />库及其字段，我必须将react-select包装起来并在redux-form字段中使用它来提交形式价值。像这样onChange。但是，当我使用包装的react-select组件时，我无法使用自定义onBlur和<Field name="customselect" component={RenderSelectInput} onChange={this.handleChange}/>函数。像这样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} );

这是RenderSelectInput.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;

homepage.js

SELECT SUBSTRING(LOCATION, 1,SEP1-1 ) AS SN
    ,  SUBSTRING(LOCATION, SEP1+1,SEP2-SEP1-1 ) AS BRAND
    ,  SUBSTRING(LOCATION, SEP2+1,SEP3-SEP2-1 ) AS NAME
    , left(right(LOCATION,8),2) AS RegionCode
    , left(right(LOCATION,6),2) AS AreaCode
    , left(right(LOCATION,4),4) AS HubCode
FROM (
    SELECT  CHARINDEX('-',LOCATION) AS SEP1 
    , CHARINDEX('-', LOCATION, CHARINDEX('-',LOCATION)+1 ) AS SEP2
    , CHARINDEX('-', LOCATION, CHARINDEX('-', LOCATION, CHARINDEX('-',LOCATION)+1 )+1) AS SEP3
    , LOCATION FROM (SELECT '1001-AAA-JOE A BLOGS-AAAA0000' AS LOCATION UNION SELECT '1002-BBB-Michael J Jackson-BBBB0000' UNION SELECT '1003-AAA-Lewis Hamilton-AAAA0000') Y
    ) X

在上面的节目中，正如我所提到的，我只想展示成功＆＃34;警告改变包装react-select中的值。请指导。

谢谢，词shash

Answer 1

你必须包装主页组件：

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

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

1 个答案: