带有react-country-region-selector的Redux形式的<Fields>在重置选项时出现问题

问题描述

我正在使用redux形式的react-country-region-selector。

// MyForm.js
<Fields
   names={['country','province']} 
   component={CountryProvinceDropdown}
/>

这是CountryProvinceDropdown的样子-

// CountryProvinceDropdown.js
import React,{ useState } from 'react';
import { CountryDropdown,RegionDropdown } from 'react-country-region-selector';

export const CountryProvinceDropdown = (fields) => {
  const [country,selectCountry] = useState('');
  const [region,selectRegion] = useState('');

  return (
    <div className='form-row'>
      <div key='country-select' className='form-group col-md-6'>
        <CountryDropdown
          value={country}
          name='country'
          id='country'
          onChange={(val) => fields.country.input.onChange(selectCountry(val))}
          onBlur={(val) => fields.country.input.onBlur(val)}
         />
      </div>
      <div key='province-select' className='form-group col-md-6'>
        <RegionDropdown
          country={country}
          value={region}
          name='province'
          id='province'
          onChange={(val) => fields.province.input.onChange(selectRegion(val))}
          onBlur={(val) => fields.province.input.onBlur(val)}
         />
      </div>
    </div>
  )
}

提交表单时没有错误并且提交成功,一切正常。

在这种情况下,如果服务器发送错误,则下拉列表将显示国家和省的旧选择以及错误。也可以使用旧选项,但是重新提交表单时,后续提交不会提交国家/省的值。唯一的方法用户需要再次选择它们。

如果用户必须再次选择相同的值来触发onChange事件,则重置下拉列表不是理想的选择。这样我们就可以让用户选择国家/地区。虽然不确定如何重置,但是更改提交状态会导致无限次重新渲染。

或者理想的情况是重新渲染此组件。感谢您的帮助,因为我是新手。

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)