提交表单时不显示单选按钮值

Question

I am using redux form for the form elements. The textfield values are shown when submitting but the radio button values is not shown. When i submit the form, i can get the values for email, pass but not role which is a radio button. I have just used {...input} in the input element because it should be suffice, i think.

Here is how i have done

radio.js

const CardToggle = ({ input, meta: { touched, error }, ...props }) => {
  return (
    <React.Fragment>
      <label>
        <StyledInput {...input} type="radio" />
        <StyledBox>
          <CenterElement>{props.children}</CenterElement>
        </StyledBox>
      </label>
      {touched && error && <span>{error}</span>}
    </React.Fragment>
  );
};

export default CardToggle;


submit = (values, mutation) => {
  console.log('values', values);
  // mutation({ variables: values });
};

<styled.Form
  onSubmit={handleSubmit(val => this.submit(val, mutation))}
>
  <Field name="email" label="Email" component={TextField} />
  <Field name="password" label="Password" component={TextField} />
  <AccountType />
</Styled.Form>

<Grid>
  <Field name="role" component={CardToggle} value="enduser">
    <UserIcon size={60} />
    <Title>End User</Title>
  </Field>
  <Field name="role" component={CardToggle} value="company">
    <CompanyIcon size={60} />
    <Title>Company</Title>
  </Field>
</Grid>

Answer 1

Try adding the checked props as well to the radio input field.

<StyledInput {...input} type="radio" checked={option.value === input.value}  />

It might be omitting out the checked prop.

Answer 2

I am not sure how it worked but it worked when i removed the type="radio" from StyledInput and instead pass the type from the calling component(Field).

<Field name="role" type="radio" component={CardToggle} value="enduser">
  <UserIcon size={60} />
  <Title>End User</Title>
</Field>

<label>
  <StyledInput {...input} type={type}/>
    <StyledBox>
      <CenterElement>{props.children}</CenterElement>
    </StyledBox>
</label>