时间戳

首页 > 解决方案 > 使用 initialValues 提交未修改的 redux-form 会将 react-select 值转换为 null 数组

reactjs - 使用 initialValues 提交未修改的 redux-form 会将 react-select 值转换为 null 数组

问题描述

我正在使用本指南与以下内容集成react-select：redux-formhttps: //gist.github.com/leocristofani/98312e61807db8f32e720c9f97a186e5

import React, { PropTypes } from 'react';
import Select from 'react-select';
import 'react-select/dist/react-select.css';

RFReactSelect.defaultProps = {
  multi: false,
  className: ""
};

RFReactSelect.propTypes = {
  input: PropTypes.shape({
    name: PropTypes.string.isRequired,
    value: PropTypes.string.isRequired,
    onBlur: PropTypes.func.isRequired,
    onChange: PropTypes.func.isRequired,
    onFocus: PropTypes.func.isRequired,
  }).isRequired,
  options: PropTypes.array.isRequired,
  multi: PropTypes.bool,
  className: PropTypes.string
};

export default function RFReactSelect({ input , options, multi, className }) {
  const { name, value, onBlur, onChange, onFocus } = input;
  const transformedValue = transformValue(value, options, multi);
  return (
    <Select
      valueKey="value"
      name={name}
      value={transformedValue}
      multi={multi}
      options={options}
      onChange={multi
        ? multiChangeHandler(onChange)
        : singleChangeHandler(onChange)
      }
      onBlur={() => onBlur(value)}
      onFocus={onFocus}
      className={className}
    />
  );
}

/**
 * onChange from Redux Form Field has to be called explicity.
 */
function singleChangeHandler(func) {
  return function handleSingleChange(value) {
    func(value ? value.value : '');
  };
}

/**
 * onBlur from Redux Form Field has to be called explicity.
 */
function multiChangeHandler(func) {
  return function handleMultiHandler(values) {
    func(values.map(value => value.value));
  };
}

/**
 * For single select, Redux Form keeps the value as a string, while React Select 
 * wants the value in the form { value: "grape", label: "Grape" }
 * 
 * * For multi select, Redux Form keeps the value as array of strings, while React Select 
 * wants the array of values in the form [{ value: "grape", label: "Grape" }]
 */
function transformValue(value, options, multi) {
  if (multi && typeof value === 'string') return [];

  const filteredOptions = options.filter(option => {
    return multi 
      ? value.indexOf(option.value) !== -1
      : option.value === value;
  });

  return multi ? filteredOptions : filteredOptions[0];
}

尽管有一个问题（到目前为止），但这仍然有效。

当我设置initialValues表单并在不触及react-select组件的情况下提交它时，它将select from的初始值转换["id1", "id2", "id3"]为[null，null，null]。

标签： reactjsreduxreact-reduxredux-formreact-select

解决方案

没关系。经过一个月的拉扯我的头发，终于能够从头开始解决它。作为新人做出反应，我必须检查很多活动部件但未能检查。

推荐阅读