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上提交一个问题。

react-redux-form Radio Field不更新已检查道具

1 个答案: