Как установить начальное значение для радиокнопки в редукс-форме? - PullRequest
Новая
       21

Как установить начальное значение для радиокнопки в редукс-форме?

0 голосов
/ 24 мая 2019

Я использую компонент 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>

Оболочка в форме редукса: 

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

Итак,я хочу, чтобы опция кредитной карты была проверена изначально, независимо от того, где она находится в списке полей, но если пользователь нажимает на другую опцию, она должна быть помечена как проверенная.

Я пытался использоватьdefaultChecked, но если я нажму на другую опцию, она вернется к кредитной карте.

Прямо сейчас с настройкой, описанной выше, я не могу проверить другую опцию, но если я нажимаю на опцию, отмеченную, она переключается наубрал один и обратно снова.

...