如何在 Redux 表单中使用 Select 倍数？

Question

select 多字段上的 onChange 没有正确 select 正确的值。假设您有一个字段并且正在使用 SelectMultiple 组件。 Select在字段中进行选择不会更新 redux 形式的状态。

<Field name="distroLists" label="Distribution Lists" component=
{SelectFieldMultiple} type="text"></Field>

其中 Select 多字段组件是

const onChange = this.props.onChange;
<select ref={name} value={value} onChange={onChange} multiple>
      { emptyValue }
      {(optionList) && optionList.map(current => (
        <option key={current.value} value={current.value}>{current.name}</option>))
      }
</select>

有人知道吗？

Answer 1

我发现您需要使用 redux-form 中的 change 函数来手动更改字段的值。

import { change as changeFieldValue } from 'redux-form'

导入后，您需要使用 redux-form 中的 changeFieldValue 创建自己的 onChange。您需要获取所有 selected 值并将它们添加到 state

const onChange = function(event) {
  let options = event.target.options;
  let selectedOptions = [];
  if (options) {
    for (let x = 0; x < options.length; x++) {
      if (options[x].selected) {
        selectedOptions.push(options[x].value);
      }
    }
    if (changeFieldValue)
      changeFieldValue(name, selectedOptions);
  }

其中名称是从道具中引入的。然后，您使用此 onChange 设置 select 多字段

上的值

如何在 Redux 表单中使用 Select 倍数？

How to Use Select Multiple with Redux Form?

reactjs

redux

redux-form