react-redux-form单选字段不更新选中的属性

Question

我有一个组件，用来创建一个包含无线输入列表的字段。创建的组件似乎正常工作，它被正确地呈现，调度适当的redux操作，并正确地更新它的状态。但是，所选的无线输入永远不会在UI中被选中。

import React from 'react';
import Immutable from 'immutable';
import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { Field } from 'react-redux-form/immutable';

const RadioField = ({ fieldId, label, model, hasError, options }) => {
  const error = hasError ? 'has-error' : '';
  return (
    <div className={`form-group ${error}`}>
      <label className="control-label" htmlFor={fieldId}>{label}</label>
      <Field model={model} id={fieldId} >
        {options.map(option => (
          <label
            key={`${fieldId}-${option.get('id')}`}
            htmlFor={`radio-${fieldId}-${option.get('value')}`}
            className="radio-inline"
          >
            <input
              id={`radio-${fieldId}-${option.get('value')}`}
              value={`${option.get('value')}`}
              type="radio"
            />
            {option.get('display')}
          </label>
        ))}
      </Field>
    </div>
  );
};

RadioField.defaultProps = {
  fieldId: 'radio-field-id',
  label: 'Radio Field:',
  model: '.radio',
  hasError: false,
  options: Immutable.List(),
};

RadioField.propTypes = {
  fieldId: PropTypes.string.isRequired,
  label: PropTypes.string.isRequired,
  model: PropTypes.string.isRequired,
  hasError: PropTypes.bool,
  options: ImmutablePropTypes.listOf(
    ImmutablePropTypes.shape({
      id: PropTypes.number,
      display: PropTypes.string,
      value: PropTypes.any,
    }),
  ).isRequired,
};

export default RadioField;

我的直觉告诉我，这与Field无法正确定位具有选定值的输入有关，或者redux状态没有正确传递给Field的子Control组件。

任何帮助都将不胜感激。谢谢!

Answer 1

在进一步研究了这个问题之后，发现创建的不可变Control.radio组件无法从应用程序的redux状态获取modelValue。将组件从带有输入的Field更改为多个通用Control组件，并为它们提供适当的无线输入支持，似乎可以解决这个问题。

下面是代码的样子。

import React from 'react';
import Immutable from 'immutable';
import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { Control } from 'react-redux-form/immutable';

const RadioField = ({ fieldId, label, model, hasError, options }) => {
  const error = hasError ? 'has-error' : '';
  return (
    <div className={`form-group ${error}`}>
      <label className="control-label" htmlFor={fieldId}>{label}</label>
      <div id={fieldId}>
        {options.map(option => (
          <label key={`${fieldId}-${option.get('id')}`} htmlFor={`${fieldId}-${option.get('id')}`} className="radio-inline">
            <Control
              id={`${fieldId}-${option.get('id')}`}
              value={option.get('value')}
              model={model}
              isToggle
              type="radio"
            />
            {option.get('display')}
          </label>
        ))}
      </div>
    </div>
  );
};

RadioField.defaultProps = {
  fieldId: 'radio-field-id',
  label: 'Radio Field:',
  model: '.radio',
  hasError: false,
  options: Immutable.List(),
};

RadioField.propTypes = {
  fieldId: PropTypes.string.isRequired,
  label: PropTypes.string.isRequired,
  model: PropTypes.string.isRequired,
  hasError: PropTypes.bool,
  options: ImmutablePropTypes.listOf(
    ImmutablePropTypes.shape({
      id: PropTypes.number,
      display: PropTypes.string,
      value: PropTypes.any,
    }),
  ).isRequired,
};

export default RadioField;

我将研究重现这个问题，并在react-redux-form的github上提交一个问题。