包装要与Redux Form一起使用的UI组件，并使用自定义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（）。

包装器组件与Redux Form一起使用，如下所示：

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

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

在第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被我传入的自定义替换。 正确调用handleTeamChange并调度操作。

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

Bottomline：我要么能够让UI组件正确更新所选值，要么执行我的自定义onChange事件。但不是两个。

以下是我能想到的想法，以解决这个问题：

• 在自定义onChange函数中，手动处理所选值的更新
• 将自定义onChange函数传递给onChange2而不是onChange（意味着它不会重载默认函数），然后让组件包装器调用input.onChange（...）和onChange2（...）。 / LI>

虽然这些替代方案都很苛刻，但我也不是特别喜欢。我还没有能够成功编码，所以到目前为止它们只是想法。

对于第一个选项，在上面的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中的道具分开。

希望这有帮助。