包装 UI 组件以与 Redux Form 一起使用，并使用自定义 onChange 事件函数 [英] Wrapping UI components to use with Redux Form, and use custom onChange event functions

问题描述

以下是我希望与 Redux Form 兼容的自定义下拉菜单，以及执行自定义 onChange 函数(例如:dispatch an action)

The following is a custom dropdown menu that I would like to make compatible with Redux Form, as well as execute custom onChange function (e.g.: dispatch an action)

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

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

In a first step, I created the wrapper as follows:

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

其中调用 Select 组件的默认 onChange().

where the default onChange() of the Select component is called.

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

The wrapper component is used with Redux Form like this:

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

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

So far, everything is good. The UI element displays the new selected value when a new value is chosen from the dropdown.

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

In step 2, I would like to pass a custom onChange event. This is what it looks like:

<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 被正确调用，动作被分派.

Here, the default onChange was replaced by the custom one that I passed in. handleTeamChange is called correctly and the action is dispatched.

但是，现在通过我自己的 onChange 不再更新从下拉列表中选择的选定值.换句话说，我选择了一个下拉项，但该值保持空白.

However, passing my own onChange now no longer updates the selected value upon choosing from the dropdown. In other words, i select a dropdown item but the value remains blank.

底线:我可以让 UI 组件正确更新所选值，或者执行我的自定义 onChange 事件.但不能两者兼而有之.

Bottomline: I am either able to have the UI component update the selected value correctly, or execute my custom onChange event. But not both.

为了解决这个问题，我能想到的想法如下:

Here are the ideas that I could think of in order to solve this problem:

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

虽然这两种选择都相当老套，我也不是特别喜欢.我也还没有能够成功地对它们进行编码，所以到目前为止它们只是想法.

Though both these alternatives are quite hacky, and I am not particularly fond of either. I have not yet been able to code them successfully either, so they are just ideas so far.

对于第一个选项，在上面的 handleTeamChange 函数中打印 e 显示以下内容，我曾尝试(但失败)使用它来手动设置 Select 组件的值:

For the first option, printing e in the handleTeamChange function above shows the following, which i have tried (and failed) to use to manually set the Select component's value:

对此的任何意见将不胜感激.

Any input on this would be greatly appreciated.

谢谢！

推荐答案

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

Allowing custom onChange handlers to be given to Field is a feature I'm considering for a future version of the library.

您的 hack 想法走在正确的轨道上.这样的事情应该可以工作:

You are on the right track with your hack ideas. Something like this should work:

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 中的一个.

I removed options, because it's there in ...rest, and you can even call your prop onChange as it's separate from the one in input.

希望这会有所帮助.

这篇关于包装 UI 组件以与 Redux Form 一起使用，并使用自定义 onChange 事件函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！