RadioGroup不使用redux-form

时间:2016-09-20 16:17:44

标签: forms reactjs react-redux redux-form

我在redux-form中使用自定义单选按钮组件。我无法使其正常工作。遵循自定义组件代码。

import React, { PropTypes } from 'react';
import {
  Col,
  ControlLabel,
  FormGroup,
  Label,
} from 'react-bootstrap';
import { RadioGroup, Radio } from 'react-radio-group';
import _ from 'lodash';
import './style.css';

const FormRadioGroup = props => (
  <FormGroup controlId={props.name || ''}>
    <Col
      componentClass={ControlLabel}
      sm={props.labelColValue || 2}
      className={props.labelClass || ''}
    >
      { props.label || 'Checkbox Label'}
    </Col>
    <Col sm={props.radioColValue || 6}>
      <RadioGroup
        name={props.name}
        selectedValue={props.input.value}
        onChange={value => { props.input.onChange(value); }}
        className="react-radio-group-button"
      >
        {
          _.map(props.options, option =>
            (
            <Label>
              <Radio value={option.key} />
              {option.value}
            </Label>
            ))
        }
      </RadioGroup >
    </Col>
  </FormGroup>
);

FormRadioGroup.propTypes = {
    name: PropTypes.string,
    labelColValue: PropTypes.number,
    labelClass: PropTypes.string,
    label: PropTypes.string,
    radioColValue: PropTypes.number,
    options: PropTypes.array,
    disabled: PropTypes.boolean,
    radioClass: PropTypes.string,
    sendBoolean: PropTypes.boolean,
    input: PropTypes.object,
    meta: PropTypes.object,
};

export default FormRadioGroup;

redux-form我使用如下。

<Field
      name="json_boolean_property"
      component={FormRadioGroup}
      format={value => (value ? 'yes':'no')}
      parse={value => (value === 'yes')}
      type="radio"
      labelColValue={2}
      label="Radio Group Label"
      radioBoxColValue={6}
      sendBoolean
      options={[
        { key: 'yes', value: 'Yes' },
        { key: 'no', value: 'No' },
      ]}
    />

当我选择单击按钮来激活更改事件时,我无法设置服务器时的默认值,但同时它也会提供redux-form/UPDATE_SYNC_ERRORS

我不确定,我做错了什么但是它的失败非常糟糕。

0 个答案:

没有答案