如何使用Redux表单选择多个?

时间:2017-05-08 18:25:32

标签: reactjs redux redux-form

选择多个字段上的onChange未正确选择正确的值。假设您有一个字段,并且您使用的是SelectMultiple组件。在字段中选择一个选项将不会以redux-form更新状态。

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

Select Field Multiple组件的位置

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>

有没有人有任何想法?

1 个答案:

答案 0 :(得分:2)

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

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

导入后,您需要使用redux-form中的onChange创建自己的changeFieldValue。您需要获取所有选定的值并将其添加到状态

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在选择的多个字段

上设置值