Question

我正在使用Field组件并设置type=radio，在呈现输入的组件中，我设置了checked={props.input.value}。该组当前包含2个单选按钮，但是很快将添加1个。我已将initialValues: { method (name of radio button): '201' (value of the one I want checked initially) }添加到reduxForm包装器中。

我的问题是，当我使用上述设置时，最初会检查组中的最后一个单选按钮，但我希望能够控制最初将检查哪个单选按钮。

呈现输入的代码：

export const RadioButton = props => {
    return (
        <div className="booking-radio-container">
            {props.meta.touched &&
                ((props.meta.error && <label className="errorCheck"> 
                    {props.meta.error}</label>) ||
                    (props.meta.warning && <label>{props.meta.warning} 
            </label>))}
            <label className="container" onClick={() => 
              props.changeFunc(props.input.value)}>
                {props.label}
                <input {...props.input} type={props.type} checked= 
                {props.input.value}  />
                <span className="checkmark" />
            </label>
        </div>
);
}

字段：

<FormSection name="paymentMethod">
    <Field
        name="method"
        label="Creditcard"
        component={RenderRadio}
        type="radio"
        changeFunc={this.props.selectPaymentMethod}
        icon={CreditIcon}
        value="201"
    />
    <Field
        name="method"
        label="Invoice"
        component={RenderRadio}
        type="radio"
        changeFunc={this.props.selectPaymentMethod}
        icon={InvoiceIcon}
        value="101"
    />
</FormSection>

redux形式的包装器：

reduxForm({
        form: 'bookingForm1',
        enableReinitialize: true,
        validate: ValidateContact,
        asyncValidate: AsyncValidate,
        asyncBlurFields: ['ContactForm.email'],
        initialValues: {
            method: '201'
        }
    })

因此，我希望首先检查信用卡选项，而不管其在字段列表中的位置如何，但是如果用户单击其他选项，则应将其设置为选中状态。

我尝试使用defaultChecked，但是如果单击其他选项，它将恢复为信用卡。

现在使用上述设置，我无法选中其他选项，但是如果我单击选中的选项，它将切换到未选中的选项，然后再返回。

如何以redux形式设置单选按钮的初始值？

0 个答案: