Значение переключателя не отображается при отправке формы - PullRequest
Новая
       21

Значение переключателя не отображается при отправке формы

0 голосов
/ 16 марта 2019

Я использую избыточную форму для элементов формы. Значения текстового поля отображаются при отправке, но значения переключателя не отображаются. Когда я отправляю форму, я могу получить значения для электронной почты, передать, но не роль, которая является переключателем. Я только что использовал {...input} в элементе ввода, потому что этого должно быть достаточно, я думаю.

Вот как я это сделал

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>

Ответы [ 2 ]

0 голосов
/ 16 марта 2019

Я не уверен, как это работает, но это работало, когда я удалил type = "radio" из StyledInput и вместо этого передал тип из вызывающего компонента (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>
0 голосов
/ 16 марта 2019

Попробуйте добавить также проверенные реквизиты в поле радиовхода. 

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

Возможно, пропущен проверенный реквизит.

...