使用Redux在两个React表单组件之间进行通信

Question

假设您有一个类似下面的表单来添加新人:

在此示例中,当您从填充的选择列表中选择国家/地区时,将使用基于所选国家/地区的选项填充城市选择元素.此表单页面(PersonCreationForm)由以下组件组成:

• CountrySelectionForm
• CitySelectionForm

这里的问题是:我应该如何在CountrySelectionForm组件之间传达选择CitySelectionForm？我有几个选项,但我不确定在Redux世界中处理这个问题的方法是什么:

• 在PersonCreationForm组件内部,只需连接onCountrySelected支柱CountrySelectionForm并将结果传递给CitySelectionForm其country支柱.无需通过Redux进行此通信.但是,更改country道具会触发更改CitySelectionForm以根据Redux商店中的选定国家/地区获取城市.
• 在国家/地区选择中,PersonCreationForm组件将调度指示选择了哪个国家/地区的操作.在此基础上,PersonCreationForm得到通知,并传递到结果CitySelectionForm通过为country道具.这会触发更改CitySelectionForm以从Redux商店获取基于所选国家/地区的城市.
• 在国家/地区选择中,PersonCreationForm组件将调度指示选择了哪个国家/地区的操作.基于此,CitySelectionForm获得通知.这会触发更改CitySelectionForm以从Redux商店获取基于所选国家/地区的城市.

Answer 1

我强烈建议您在这种情况下使用redux-form。在你的情况下，它会是这样的：

render() {
  const {fields, handleSubmit} = this.props
  return (   
    <form>
      <CountrySelectInput {...fields.country}/>
      <CitySelectInput {...field.city} country={fields.country.value}/>
      <input type="text" {...fields.name}/>
      <button type="submit" onClick={handleSubmit(this.addHandler)}>Add</button>
    </form>
  )
}

为了实现这项工作，您应该在 ContrySelectInput 和 CitySelectInput 组件中处理“value”和“onChange”属性。就像普通输入一样。

Redux-form 模块将显着简化您的表单生活。您可以使用 clean redux 来执行类似的操作（列表中的选项 1）。而且它仍然是正确的。