如何在 redux-forms/final-forms 中呈现适当的下拉选项？答案

【问题标题】：How to render appropriate dropdown options in redux-forms/final-forms?如何在 redux-forms/final-forms 中呈现适当的下拉选项？
【发布时间】：2021-11-29 23:32:30
【问题描述】：

我正在使用 react 和 redux-forms 构建基本的国家和地区表单。

我面临根据用户选择的国家/地区呈现区域的问题。

如何将选定的国家/地区值传递/告知区域下拉列表并相应地呈现？

编辑：目前我没有任何组件级状态。

字段组件：

   <Field
        component={this.renderDropDown}
        data={countries}
        name="country"
        label="Country"
   />

   <Field
        component={this.renderDropDown}
        data={regions}
        name="Region"
        label="Region"
   />

renderDropDown 方法：

  renderDropDown = ({data,label,input}) => {
  const renderedOptions = data.map(item => {
       return <option key={item.key} value={item.name}>{item.name}</option>
});

return (
  <div className="field">
    <label htmlFor="state">{label}</label>
    <select className="ui dropdown" {...input}>
        <option value="">State</option>
        {renderedOptions}
    </select>
  </div>
);
}

【问题讨论】：

你需要在 select 上有一个 onChange 属性
当我使用 onChange 属性时，它不会更改下拉列表的值，也不会提交所选选项。但是 onChange 上的回调函数执行成功。
看我的回答我给你一个更好的例子

标签： reactjs redux react-redux react-hooks redux-form

【解决方案1】：

这就是你缺少的东西

const [selected,setSelected]=useState(null)

return(
    <select value={selected} onChange={setSelected}>            
           <option value="grapefruit">Grapefruit</option>
            <option value="lime">Lime</option>
            <option value="coconut">Coconut</option>
            <option value="mango">Mango</option>
    </select>
)

【讨论】：