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

【问题标题】：Form submit for react-country-region-selector using Redux使用 Redux 为 react-country-region-selector 提交表单
【发布时间】：2019-08-19 20:48:29
【问题描述】：

我必须在 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 表单中的字段？

【问题讨论】：

父表单有以下代码 - Fields names={[COUNTRY,STATE]} component={CountryRegion}
如果您使用 react-redux 连接，您忘记将输入作为来自父级或容器的 prop 传递。
谢谢@HMR 是的，我正在使用 redux 连接。您是否有示例代码如何将输入作为道具从父级传递到表单容器？我不确定它的语法部分。

标签： javascript reactjs

【解决方案1】：

我使用 props 来绑定表单提交的属性。下面是 onchange 方法的代码-

<RegionDropdown className="form-control" name="STATE"
                            country={country}
                            value={region}
                            valueType="short"
                            countryValueType="short"
                            showDefaultOption={true}
                            defaultOptionLabel={"Select State"}
                            onChange={(value) => 
{this.props.state.input.onChange(this.selectRegion(value));}}/>

【讨论】：