使用 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 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));}}/>