ReactJS Redux表单字段-自定义复选框/单选框组件-初始检查中的错误

Question

我正在基于renderField创建自定义单选按钮/复选框组件。 该组件看起来可以很好地渲染，但是当我向其添加“ checked”参数时，它就会中断。 该字段已正确选择-但是在切换选项时，它似乎试图强制检查旧项目。

// renderField

import React from 'react'

const renderField = ({input, label, type, meta: {touched, error, warning}}) => (
  <div className='field'>
    <label>
      {touched &&
        <span>
          {label}
        </span>
      }
      {touched &&
        ((
          error &&
            <span className="error">
              : {error}
            </span>) ||
          (
          warning &&
            <span className="warning">
              : {warning}
            </span>
        ))}
    </label>
    <div>
      <input {...input} placeholder={label} type={type} />
    </div>
  </div>
)

export default renderField

这是新字段-标记与标准输入字段不同。

// renderRadioCheckField

import React from 'react'
import _ from 'underscore';

function renderRadioCheckField({input, label, type, checked, meta: {touched, error, warning}}) {
  const randId = _.uniqueId('radiocheck_');

  return (
    <div className='field'>
      <div>
        <input {...input} placeholder={label} type={type} id={randId} checked={checked} />
        <label className="group-label" htmlFor={randId}>
          {label}
        </label>
      </div>
    </div>
  );
}


export default renderRadioCheckField

-

在我的表单组件上，我将它们导入并这样调用它们

  <Field name="test" type="text" component={renderField}  label="test" />

  <br/><br/>  
  <Field name="radio-group1" type="radio" component={renderRadioCheckField} value="check1" label="Apple2" />
  <Field name="radio-group1" type="radio" component={renderRadioCheckField} value="check2" label="Peach2" checked="true" />
  <Field name="radio-group1" type="radio" component={renderRadioCheckField} value="check3" label="Orange2" />

  <br/><br/>  
  <Field name="check-group1" type="checkbox" component={renderRadioCheckField} value="check1" label="Yes" />
  <Field name="check-group1" type="checkbox" component={renderRadioCheckField} value="check2" label="No" checked="true" />

Answer 1

不要使用checked="true" 。 而是在React Redux Form组件的componentDidMount()方法中执行以下操作。

componentDidMount(){
        const {radio-group1} = this.props;

        //Sets initial default checked value
        this.props.change('radio-group1','check2'); 
}

您可以对复选框执行相同的操作。