两个 React 表单组件与 Redux 之间的通信

Question

假设您有如下表格来添加新人：

在此示例中，当您从填充的 select 列表中 select 一个国家时，城市 select 元素将填充基于 selected 的选项国家。此表单页面 (PersonCreationForm) 由以下组件组成：

国家选择表
CitySelectionForm

这里的问题是：我应该如何将 selection 从 CountrySelectionForm 组件传送到 CitySelectionForm 组件？我有几个选择，但我不确定在 Redux 世界中处理这个问题的首选方法是什么：

在 PersonCreationForm 组件内部，只需连接 CountrySelectionForm 的 onCountrySelected 属性，然后通过其 country 属性将结果传递给 CitySelectionForm。无需通过 Redux 进行此通信。但是，更改 country 道具会触发 CitySelectionForm 的更改，以从 Redux 商店获取基于 selected 国家/地区的城市。
在国家 selection 上，PersonCreationForm 组件发送指示 selected 国家的操作。基于此，PersonCreationForm 得到通知并通过 is country prop 将结果传递给 CitySelectionForm。这会触发 CitySelectionForm 的变化，以从 Redux 商店中获取基于 selected 国家/地区的城市。
在国家 selection 上，PersonCreationForm 组件发送指示 selected 国家的操作。基于此，CitySelectionForm 收到通知。这会触发 CitySelectionForm 的变化，以从 Redux 商店中获取基于 selected 国家/地区的城市。

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 模块将大大简化您使用表单的生活。您可以使用干净的 redux（列表中的选项 1）来做类似的事情。而且还是会的。

Answer 2

有一种可能方法来确定您可以使用哪个选项：

如果您不需要在整个应用程序中共享数据，并且组件具有相同的父级，那么您可以这样做它与本地状态。因此它节省了您的时间，因为您不需要编写动作、reducer 的代码等，也不需要任何抽象。

如果您需要在应用程序中共享数据，然后您可以使用 redux stuff

Answer 3

我不得不使用 react-redux 和 redux-form 做类似的事情。你可以这样做：

AddUserForm.js:

render() {
    const {fields, handleSubmit} = this.props
    return (
        <form onSubmit={handleSubmit}>
            <CountrySelect {...fields.country} />
            <CitySelect {...fields.city} />
        </form>
    )
}

CountrySelect.js:

import { updateCities } from 'actions'
...
render() {
    const {handleChange, ...rest} = this.props
    return (
        <select {...rest} onChange={handleChange}>
            <option value="USA">USA</option>
            ...
        </select>
    )
}

const mapDispatchToProps = (dispatch) => {
    return {
        handleChange: (event) => {
            let countryId = event.target.value
            dispatch(updateCities(countryId))
            return countryId
        }
    }
}

export default connect(null, mapDispatchToProps)(CountrySelect)

CitySelect.js:

render() {
    const {cities, ...rest} = this.props
    return (
        <select {...rest}>
            {cities.map(city => {
                return (
                    <option key={city} value={city}>{city}</option>
                )
            })}
        </select>
    )
}

const mapStateToProps = (state) => {
    return {
        cities: state.cities
    }
}

export default connect(mapStateToProps)(CitySelect)

actions.js:

函数 updateCities 会将 redux state.cities 设置为如下所示的数组：

state.cities = [
    'Los Angeles',
    'New York',
    ...
]

Answer 4

对于此用例，您不需要 Redux。您可以将 PersonCreationForm 组件用作具有内部状态的包装器。

这两个选择 CountrySelectionForm 和 CitySelectionForm 必须通过 props 接收一个专用处理程序，当它们在 'onSelect' 事件的子组件中被触发时执行 setState() .

由于智能组件 PersonCreationForm.

管理的状态，CitySelectionForm 组件将通过 props 接收 CountrySelectionForm 的值

两个 React 表单组件与 Redux 之间的通信

Communication between two React form components with Redux

reactjs

redux

react-redux