やりたいこと

ReactでFormikを利用する最低限のコードを作りたい（色々発展させる元としたい）。
とりあえず、以下のようのものができる。

準備

作業場の作成と必要モジュールのインストール。

今回はcreate-react-appを使って雛形を作る。

create-react-app formikYup
cd formikYup

npm install --save formik
npm install --save yup

実装

App.js

App.jsで同じ階層にあるMyForm.jsを呼び出すようにしている（無駄なコードは削除）。

App.js

import React from 'react';
import MyForm from './MyForm';

function App() {
  return (
    <>
      <MyForm />
    </>
  );
}

export default App;

MyForm.js

いろいろな書き方があるが、いつもReact Nativeで書いているのと（個人的に）同じ書き方にしてみる。
バリデーションにはYupを利用することにする。

MyForm.js

import React from 'react';
import { Formik } from 'formik';
import * as Yup from 'yup';

export default class MyForm extends React.Component {
    render() {
        return (
            <div>
                <h2>My Form</h2>
                <Formik
                    initialValues={{ email: '', password: '' }}
                    onSubmit={(values, actions) => {
                        alert(JSON.stringify(values, null, 2));
                    }}
                    validationSchema={Yup.object().shape({
                        email: Yup.string().email('emailの形式がおかしいです。').required('emailは必須です。'),
                        password: Yup.string().required('パスワードは必須です。'),
                    })}
                >
                    {
                        ({ handleSubmit, handleChange, handleBlur, values, errors, touched }) => (
                            <form onSubmit={handleSubmit}>
                                <input
                                    type="email"
                                    name="email"
                                    onChange={handleChange}
                                    onBlur={handleBlur}
                                    value={values.email}
                                /><br />
                                {touched.email && errors.email ? <div>{errors.email}</div> : null}
                                <input
                                    type="password"
                                    name="password"
                                    onChange={handleChange}
                                    onBlur={handleBlur}
                                    value={values.password}
                                /><br />
                                {touched.password && errors.password ? <div>{errors.password}</div> : null}
                                <button type="submit">Submit</button>
                            </form>
                        )
                    }
                </Formik>
            </div>
        );
    }
}

応用：Bootstrap4を利用する

基本形？がわかったところでBootstrapを適用してみます。
下記のような完成形を目指します（エラーを起こさせているところ）。

ReactでBootstrapを使うにはreactstrap等のモジュールを利用します。

インストール

reactstrapにはcssが含まれないため、bootstrapもインストールします。

npm install --save bootstrap
npm install --save reactstrap

App.js

ここでbootstrapのcssをimportしておきます。
で、別途、MyStrap.jsを作成してimportしています。
特に難しいところはありませんが、エラー表示のところにinvalidやら<FormFeedback></FormFeedback>などを利用しています。

Appjs

import React from 'react';
import MyForm from './MyForm';
import MyStrap from './MyStrap';
+import 'bootstrap/dist/css/bootstrap.min.css';

function App() {
  return (
    <>
      <MyStrap />
    </>
  );
}

export default App;

MyStrap.js

上記のMyForm.jsをベースにbootstrap化します。

MyStrap.js

import React from 'react';
import { Formik } from 'formik';
import * as Yup from 'yup';
import {
    Button,
    Form,
    FormGroup,
    Label,
    Input,
    FormFeedback,
} from 'reactstrap';

export default class MyStrap extends React.Component {
    render() {
        return (
            <div className="max-auto col-8">
                <h2>My Form</h2>
                <Formik
                    initialValues={{ email: '', password: '', gender: '', check: false }}
                    onSubmit={(values, actions) => {
                        alert(JSON.stringify(values, null, 2));
                    }}
                    validationSchema={Yup.object().shape({
                        email: Yup.string().email('emailの形式がおかしいです。').required('emailは必須です。'),
                        password: Yup.string().required('パスワードは必須です。'),
                        gender: Yup.string().oneOf(['male', 'female']).required('選択してください。'),
                        check: Yup.boolean().oneOf([true], '同意してください。'),
                    })}
                >
                    {
                        ({ handleSubmit, handleChange, handleBlur, values, errors, touched }) => (
                            <Form className="text-left" onSubmit={handleSubmit}>
                                {/* email */}
                                <FormGroup className="mb-2">
                                    <Label for="myEmail">Email</Label>
                                    <Input
                                        type="email"
                                        name="email"
                                        id="myEmail"
                                        onChange={handleChange}
                                        onBlur={handleBlur}
                                        value={values.email}
                                        invalid={touched.email && errors.email}
                                    />
                                    <FormFeedback>{errors.email}</FormFeedback>
                                    {/* {touched.email && errors.email ? <div>{errors.email}</div> : null} */}
                                </FormGroup>
                                {/* password */}
                                <FormGroup className="mb-2">
                                    <Label for="myPassword">Password</Label>
                                    <Input
                                        type="password"
                                        name="password"
                                        id="myPassword"
                                        onChange={handleChange}
                                        onBlur={handleBlur}
                                        value={values.password}
                                        invalid={touched.password && errors.password}
                                    />
                                    <FormFeedback>{errors.password}</FormFeedback>
                                    {/* {touched.password && errors.password ? <div>{errors.password}</div> : null} */}
                                </FormGroup>
                                {/* gender redio */}
                                <FormGroup className="mb-2" tag="fieldset">
                                    <p>性別</p>
                                    <FormGroup inline check>
                                        <Label check>
                                            <Input type="radio" name="gender" value="male" onChange={handleChange} />male
                                    </Label>
                                    </FormGroup>
                                    <FormGroup inline check>
                                        <Label check>
                                            <Input type="radio" name="gender" value="female" onChange={handleChange} />female
                                    </Label>
                                    </FormGroup>
                                    <span className="ml-3 text-danger" style={{ fontSize: '0.8rem' }}>
                                        {touched.gender && errors.gender ? <span>{errors.gender}</span> : null}
                                    </span>
                                </FormGroup>
                                {/* checkbox */}
                                <FormGroup check className="mb-2" style={{ marginTop: 30 }}>
                                    <Input type="checkbox" name="check" id="myCheck" onChange={handleChange} />
                                    <Label for="myCheck" check>
                                        同意する
                                    </Label>
                                    <span className="ml-3 text-danger" style={{ fontSize: '0.8rem' }}>
                                        {touched.check && errors.check ? <span>{errors.check}</span> : null}
                                    </span>
                                </FormGroup>
                                {/* Button */}
                                <div style={{ marginTop: 30 }}>
                                    <Button type="submit" color="primary">Submit</Button>
                                </div>
                                
                            </Form>
                        )
                    }
                </Formik>
            </div>
        );
    }
}

　おまけ

上記はreactstrapを利用していますが、react-bootstrapを利用したパータンも下記に追記しておきます。
利用のためには、

yarn add react-bootstrap bootstrap

としておく必要があります。詳しくは本家サイトをみればいいでしょう。

import React from 'react';
import { Formik } from 'formik';
import * as Yup from 'yup';
import { Form, Button, FormGroup, } from 'react-bootstrap';

export default class SimpleForm extends React.Component {
    render() {
        return (
            <div className="container" style={{ marginTop: 30 }}>
                <div className="mx-auto col-8">
                    <h2>SimpleForm</h2>
                    <Formik
                        initialValues={{ email: '', password: '', area: '', note: '', gender: '', agree: false }}
                        onSubmit={(values) => alert(JSON.stringify(values))}
                        validationSchema={Yup.object().shape({
                            email: Yup.string().email().required(),
                            password: Yup.string().required(),
                            area: Yup.string().oneOf(['関東', '関西', 'その他'], '選択してください。').required(),
                            note: Yup.string().required(),
                            gender: Yup.string().oneOf(['male', 'female']).required('どちらかを選択してください。'),
                            agree: Yup.boolean().oneOf([true], '同意してください。'),
                        })}
                    >
                        {
                            ({ handleSubmit, handleChange, handleBlur, values, errors, touched }) => (
                                <Form onSubmit={handleSubmit}>
                                    <Form.Group>
                                        <Form.Label>Email</Form.Label>
                                        <Form.Control
                                            type="email"
                                            name="email"
                                            onChange={handleChange}
                                            onBlur={handleBlur}
                                            value={values.email}
                                            isInvalid={!!(touched.email && errors.email)}
                                        />
                                        <Form.Control.Feedback type="invalid">
                                            {errors.email}
                                        </Form.Control.Feedback>
                                    </Form.Group>
                                    <Form.Group>
                                        <Form.Label>Password</Form.Label>
                                        <Form.Control
                                            type="password"
                                            name="password"
                                            onChange={handleChange}
                                            onBlur={handleBlur}
                                            value={values.password}
                                            isInvalid={!!(touched.password && errors.password)}
                                        />
                                        <Form.Control.Feedback type="invalid">
                                            {errors.password}
                                        </Form.Control.Feedback>
                                    </Form.Group>

                                    <Form.Group>
                                        <Form.Label>お住まいのエリア</Form.Label>
                                        <Form.Control
                                            as="select"
                                            name="area"
                                            onChange={handleChange}
                                            onBlur={handleBlur}
                                            value={values.area}
                                            isInvalid={!!(touched.area && errors.area)}
                                        >
                                            <option>選択してください</option>
                                            <option>関東</option>
                                            <option>関西</option>
                                            <option>その他</option>
                                        </Form.Control>
                                        <Form.Control.Feedback type="invalid">
                                            {errors.area}
                                        </Form.Control.Feedback>
                                    </Form.Group>

                                    <Form.Group>
                                        <Form.Label>お問合せ内容</Form.Label>
                                        <Form.Control
                                            as="textarea"
                                            rows="5"
                                            name="note"
                                            onChange={handleChange}
                                            onBlur={handleBlur}
                                            value={values.note}
                                            isInvalid={!!(touched.note && errors.note)}
                                        />
                                        <Form.Control.Feedback type="invalid">
                                            {errors.note}
                                        </Form.Control.Feedback>
                                    </Form.Group>

                                    <Form.Group>
                                        <Form.Label>性別</Form.Label>
                                        <Form.Group>
                                            <Form.Check
                                                type="radio"
                                                label="男"
                                                name="gender"
                                                value="male"
                                                inline
                                                onChange={handleChange}
                                                isInvalid={!!errors.gender}
                                            />
                                            <Form.Check
                                                type="radio"
                                                label="女"
                                                name="gender"
                                                value="female"
                                                inline
                                                onChange={handleChange}
                                                isInvalid={!!errors.gender}
                                            />
                                        </Form.Group>
                                        <span className="text-danger" style={{ fontSize: '0.8rem' }}>
                                            {errors.gender}
                                        </span>
                                    </Form.Group>

                                    <Form.Group>
                                        <Form.Label>同意</Form.Label>
                                        <Form.Group>
                                            <Form.Check
                                                type="checkbox"
                                                label="同意する"
                                                name="agree"
                                                value="true"
                                                onChange={handleChange}
                                                isInvalid={!!errors.agree}
                                                feedback={errors.agree}
                                            />
                                        </Form.Group>
                                        {/* <span className="text-danger" style={{ fontSize: '0.8rem' }}>
                                        {errors.agree}
                                    </span> */}
                                    </Form.Group>

                                    {/* button */}
                                    <Button variant="primary" type="submit">Submit</Button>
                                </Form>
                            )
                        }
                    </Formik>
                </div>
            </div>
        );
    }
}

参考