React无线电按钮未显示在浏览器中

Question

我是新手反应和形成，并努力将我的无线电按钮显示在浏览器中。我认为这是因为无线电按钮未定义为我的FormikControl功能中的道具。如何将其添加到我的FormikControl功能中的其他道具中？请建议如何解决此问题。预先感谢

App.js：

import React from 'react';
import './App.css';
import FormikContainer from './components/FormikContainer';
import LoginForm from './components/LoginForm';
import Registrationform from './components/RegistrationForm';

function App() {
  return (
    <div>
      <LoginForm />
      <Registrationform />
    </div>
  );
}

export default App;

注册表：

import React from 'react';
import { Formik, Form } from 'formik';
import * as yup from 'yup';
import FormikControl from './FormikControl';

function Registrationform() {
  const options = [
    { key: 'Email', value: 'emailmoc' },
    { key: 'Telephone', vlaue: 'telephonemoc' }
  ];

  const initialValues = {
    email: '',
    password: '',
    confirmPassword: '',
    modeOfContact: '',
    phone: ''
  };

  const validationSchema = yup.object({
    email: yup.string().email('Invalid email format').required('Required'),
    password: yup.string().required('Required'),
    confirmPassword: yup
      .string()
      .oneOf([yup.ref('password'), ''], 'Passwords must match')
      .required('required'),
    modeOfContact: yup.string().required('Required'),
    phone: yup.string().when('modeOfContact', {
      is: 'telephonemoc',
      then: yup.string().required('Required')
    })
  });

  const onSubmit = (values) => {
    console.log('Form data', values);
  };
  return (
    <Formik
      initialValues={initialValues}
      validationSchema={validationSchema}
      onSubmit={onSubmit}
    >
      {(formik) => {
        return (
          <Form>
            <FormikControl
              control="input"
              type="email"
              label="Email"
              name="email"
            />

            <FormikControl
              control="input"
              type="password"
              label="Password"
              name="password"
            />

            <FormikControl
              control="input"
              type="password"
              label="Confirm Password"
              name="confirmPassword"
            />

            <FormikControl
              control="radio"
              type="Mode of contact"
              label="modeOfContact"
              options={options}
            />
            <FormikControl
              control="input"
              type="text"
              label="Phone number"
              name="phone"
            />

            <button type="submit" disabled={!formik.isValid}>
              Submit
            </button>
          </Form>
        );
      }}
    </Formik>
  );
}

export default Registrationform;

FormikControl：

import React from 'react';

function FormikControl({ control, id, label, ...rest }) {
  return (
    <>
      {control === 'input' && <label htmlFor={id}>{label}</label>}
      <input id={id} {...rest} />
    </>
  );
}

export default FormikControl;

FormikContainer：

import React from 'react';
import { Formik, Form } from 'formik';
import * as Yup from 'yup';
import FormikControl from './FormikControl';

function FormikContainer() {
  const initialValues = {
    email: '',
    password: ''
  };
  const validationschema = Yup.object({
    email: Yup.string().required('Required')
  });
  const onSubmit = (values) => console.log('Form data', values);

  return (
    <div>
      <Formik
        initialValues={initialValues}
        validationschema={validationschema}
        onSubmit={onSubmit}
      >
        {(formik) => (
          <Form>
            <FormikControl
              control="input"
              type="email"
              label="Email"
              name="email"
            />

            <FormikControl
              control="input"
              type="password"
              label="Password"
              name="password"
            />

            <button type="submit">Submit</button>
          </Form>
        )}
      </Formik>
    </div>
  );
}

export default FormikContainer;

Answer 1

为了获得使用Formik渲染的广播按钮，您必须通过发送类型=“无线电”来导入字段组件并使用它，这是它的外观：
在此处

或通过使用您创建的相同组件但使用type =” ”：

<FormikControl
 control="input"
 type="radio"
 .....
/>