使用 Redux 为 react-country-region-selector 提交表单

Question

我必须在 ReactJS 中实现国家/地区选择（下拉）。

我使用了 react-country-region-selector 并创建了一个CountryRegion具有CountryDropDown和RegionDropDown实现的组件。

我的应用程序使用 redux-form。我需要将用户选择的国家和地区值传递给我使用CountryRegion组件的父表单。

我尝试使用 redux-form "Fields" 但它抛出了这个错误：

未捕获的类型错误：无法读取未定义的属性“onChange”。

这是 CountryRegion.jsx -

import React, { Component } from 'react';

import 'react-select/dist/react-select.css'

import 'react-virtualized/styles.css'

import 'react-virtualized-select/styles.css'

import { CountryDropdown, RegionDropdown } from 'react-country-region-selector';

class CountryRegion extends Component {

constructor (props) {

    super(props);

    this.state = { country: '', region: '' };

}

selectCountry (val) {

    this.setState({ country: val });

}

selectRegion (value) {

    this.setState({ region: value });

}

render () {

    const {input, name, className} = this.props;

    const {country, region } = this.state;

    return (

        <div>

            <label className={"col-form-label"}>Work Country</label>

            <CountryDropdown class="form-control" name="COUNTRY"

                value={country}

                valueType="short" priorityOptions={["US","CA"]} showDefaultOption={false}

                             onChange={(val) => {input.onChange(this.selectCountry(val)); }}/>

            <label className={"col-form-label"}>Work State / Province</label>

            <RegionDropdown class="form-control" name="STATE"

                country={this.state.country}

                value={this.state.region}

                valueType="short"

                countryValueType="short"

                            showDefaultOption={false}

                           onChange={(value) => {input.onChange(this.selectRegion(value));}}/>

        </div>

    );

}

}

export default CountryRegion;

这就是我在父表单中引用 CountryRegion 代码的方式：

{<Fields names={[COUNTRY,STATE]} component={CountryRegion}/>}

每次用户选择或更改下拉值时，如何将两个下拉列表中的值绑定到 redux 表单中的表单属性或字段？

Answer 1

我使用 props 绑定表单提交的属性。下面是onchange方法的代码-<RegionDropdown&nbsp;className="form-control"&nbsp;name="STATE" &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;country={country} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value={region} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;valueType="short" &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;countryValueType="short" &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;showDefaultOption={true} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;defaultOptionLabel={"Select&nbsp;State"} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onChange={(value)&nbsp;=>&nbsp;{this.props.state.input.onChange(this.selectRegion(value));}}/>