包装 UI 个组件以与 Redux Form 一起使用，并使用自定义 onChange 事件函数

Question

下面是一个自定义的下拉菜单，我希望它与 Redux Form 兼容，并执行自定义的 onChange 函数（例如：调度一个动作）

<Select
  label='Team'
  name='team'
  options={teamOptions}
  placeholder='Team'
  onClick={this.handleTeamClick}
/>

第一步，我按如下方式创建了包装器：

export const rfSelect = ({ input, options, meta, ...rest }) => (
  <Select {...input} onChange={(e,v) => input.onChange(v.value)} options={options} {...rest} />
)

调用 Select 组件的默认 onChange() 的地方。

wrapper 组件与 Redux Form 一起使用，如下所示：

<Field
  component={rfSelect}
  label='Team'
  name='team'
  options={teamOptions}
  placeholder='Team'
  onClick={this.handleTeamClick}
/>

到目前为止，一切都很好。当从下拉列表中选择新值时，UI 元素显示新的 selected 值。

在第 2 步中，我想传递一个自定义的 onChange 事件。这是它的样子：

<Field
  component={rfSelect}
  label='Team'
  name='team'
  options={teamOptions}
  placeholder='Team'
  onClick={this.handleTeamClick}
  onChange={this.handleTeamChange}
/>

handleTeamChange(e, sel) {
  this.props.dispatch(bla.handleTeamChange(sel.value))
}

export const rfSelect = ({ input, options, meta, ...rest }) => (
  <Select {...input} onChange={(e,v) => input.onChange(v.value)} options={options} {...rest} />
)

在这里，默认的 onChange 被我传入的自定义 onChange 替换了。 handleTeamChange 被正确调用并调度了操作。

但是，传递我自己的 onChange 现在不再更新从下拉列表中选择的 selected 值。换句话说，我 select 一个下拉项，但值仍然为空。

底线：我可以让 UI 组件正确更新 selected 值，或者执行我的自定义 onChange 事件。但不是两者。

为了解决这个问题，我想到了以下想法：

在自定义 onChange 函数中，手动处理 selected 值的更新
将自定义 onChange 函数作为 onChange2 而不是 onChange 传入（这意味着它不会重载默认函数），然后让组件包装器同时调用 input.onChange(...) 和 onChange2(.. .).

尽管这两种选择都很老套，而且我也不是特别喜欢。我也还没有成功地编写它们，所以到目前为止它们只是想法。

对于第一个选项，在上面的 handleTeamChange 函数中打印 e 显示以下内容，我已尝试（但失败）用于手动设置 Select 组件的值：

如有任何意见，我们将不胜感激。

谢谢！

Answer 1

允许将自定义 onChange 处理程序提供给 Field 是我正在考虑为库的未来版本添加的功能。

您的黑客想法走在正确的轨道上。这样的事情应该有效：

export const rfSelect = ({ input, meta, onChange, ...rest }) => (
  <Select {...input} onChange={(e,v) => {
    input.onChange(v.value) // update redux-form value
    onChange(v.value)       // call your additional listener
  }} {...rest} />
)

我删除了 options，因为它在 ...rest 中，您甚至可以将您的道具命名为 onChange，因为它与 input 中的道具是分开的。

希望这对您有所帮助。

包装 UI 个组件以与 Redux Form 一起使用，并使用自定义 onChange 事件函数

Wrapping UI components to use with Redux Form, and use custom onChange event functions

reactjs

redux-form