结束语UI组件与Redux的形式使用，并使用自定义onChange事件函数(Wrapping UI

下面是我想使兼容终极版的形式，以及执行自定义功能的电平变化的自定义下拉菜单（如：派遣一个动作）

<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} />
)

在选择组件的默认的onChange（）被调用。

该包装部件使用Redux的形式是这样的：

<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现在已不再更新在从下拉菜单中选择所选择的值。换句话说，我选择一个下拉菜单项，但值仍为空白。

底线：我要么能够正确有UI组件更新选定的值，或执行我的自定义onChange事件。但不能同时使用。

下面是我能想到的，为了解决这个问题的思路：

在定制的onChange功能，手动处理所选择的值的更新
通过自定义的onChange功能onChange2代替的onChange（这意味着它不会过载的默认功能），然后让部件的包装材料通话双方input.onChange（...）和onChange2（...）。

尽管这两种方案都相当哈克，我不是特别喜欢的任何。我还没有能够成功他们要么代码，所以他们只是想法而已。

对于第一种选择，印刷e在上述handleTeamChange函数示出了以下内容，这我已经尝试（但失败了）使用手动设置选择组件的值：

在此任何输入，将不胜感激。

谢谢！

允许自定义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 。

希望这可以帮助。