「React Formik」 連想配列を用いたcheckboxの実装
FieldArrayを用いて書き直す場合、どうやって書けばいいのでしょうか？
import React, { Component } from 'react';
import { Formik, Form, Field, FieldArray } from 'formik';
import classNames from 'classnames';
import * as Yup from 'yup';
class FormStep1 extends Component {
render() {
const requiredMes = '入力必須項目です';
const nameMaxLength = '16文字以内で入力して下さい';
const birthdayMaxLength = '10文字以内で入力して下さい (例: 1994/09/26)';
const typeOfErorr = '入力形式が正しくありません';
const checkboxValues = {'1':'a', '2':'b', '3':'c',}
const checkboxField = Object.keys(checkboxValues).map((value, index) => {
return (
<div className="checkbox" key={value}>
<div className="l-bottom-xxs">
<label
className="checkbox-inline radio-inline text-size-14"
htmlFor={value}
>
<Field
name="checkbox"
type="checkbox"
value={value}
id={value}
/>
{index}
</label>
</div>
</div>
);
});
return (
<div className="l-signup-container w-md">
<div className="l-signup-header"></div>
<div className="l-signup-content">
<div className="l-signup-form">
<Formik
initialValues={{
firstName: '',
lastName: '',
firstNameRuby: '',
lastNameRuby: '',
birthday: '',
radioGroup: '',
prefecture: '',
prefectureCity: '',
occupation: '',
workstyle: '',
hourlyWage: '',
company: '',
}}
validationSchema={Yup.object().shape({
firstName: Yup.string()
.max(16, nameMaxLength)
.required(requiredMes),
lastName: Yup.string()
.max(16, nameMaxLength)
.required(requiredMes),
firstNameRuby: Yup.string().required(requiredMes),
lastNameRuby: Yup.string().required(requiredMes),
birthday: Yup.string()
.max(10, birthdayMaxLength)
.required(requiredMes)
.matches(/[0-9/]/, { message: typeOfErorr }),
radioGroup: Yup.string().required(requiredMes),
prefecture: Yup.string().required(requiredMes),
prefectureCity: Yup.string().required(requiredMes),
occupation: Yup.string().required(requiredMes),
occupationSub: Yup.string().required(requiredMes),
workstyle: Yup.string().required(requiredMes),
hourlyWage: Yup.number().required(requiredMes),
company: Yup.string(),
})}
>
{({ values, errors, touched }) => (
<Form>
<div className="l-bottom-s">
<label htmlFor="last-name" className="heading-form-label">
お名前<span className="label-required">必須</span>
</label>
<div className="l-form-horizontal l-bottom-s">
<div className="l-form-half">
<div className="input-line">
<Field
type="text"
name="lastName"
className="full"
id="last-name"
placeholder="姓"
/>
</div>
{errors.lastName && touched.lastName ? (
<div className="label-required">
{errors.lastName}
</div>
) : null}
</div>
<div className="l-form-half">
<div className="input-line">
<Field
type="text"
name="firstName"
className="full"
id="first-name"
placeholder="名"
/>
</div>
{errors.firstName && touched.firstName ? (
<div className="label-required">
{errors.firstName}
</div>
) : null}
</div>
</div>
</div>
<div className="l-bottom-s">
<label
htmlFor="phonetic-last-name"
className="heading-form-label"
>
ふりがな<span className="label-required">必須</span>
</label>
<div className="l-form-horizontal l-bottom-s">
<div className="l-form-half">
<div className="input-line">
<Field
type="text"
name="lastNameRuby"
className="full"
placeholder="せい"
/>
</div>
{errors.lastNameRuby && touched.lastNameRuby ? (
<div className="label-required">
{errors.lastNameRuby}
</div>
) : null}
</div>
<div className="l-form-half">
<div className="input-line">
<Field
type="text"
name="firstNameRuby"
className="full"
placeholder="めい"
/>
</div>
{errors.firstNameRuby && touched.firstNameRuby ? (
<div className="label-required">
{errors.firstNameRuby}
</div>
) : null}
</div>
</div>
</div>
<div className="l-bottom-s">
<label
htmlFor="birthday-input"
className="heading-form-label"
>
生年月日<span className="label-required">必須</span>
</label>
<div className="input-line">
<Field
type="tel"
name="birthday"
id="birthday-input"
placeholder="1994/09/26"
pattern="[0-9/]{10}"
/>
</div>
{errors.birthday && touched.birthday ? (
<div className="label-required">{errors.birthday}</div>
) : null}
</div>
<div className="l-bottom-s">
<fieldset>
<label
className="heading-form-label"
htmlFor="radioGroup"
>
性別
<span className="label-required">必須</span>
</label>
<div className="l-form-horizontal">
<label
className="checkbox-inline radio-inline text-size-14"
htmlFor="male"
>
<Field
name="radioGroup"
id="male"
type="radio"
value="male"
className={classNames('radio-button')}
/>
男性
</label>
<label
className="checkbox-inline radio-inline text-size-14"
htmlFor="female"
>
<Field
name="radioGroup"
id="female"
type="radio"
value="female"
className={classNames('radio-button')}
/>
女性
</label>
</div>
</fieldset>
{errors.radioGroup && touched.radioGroup ? (
<div className="label-required">{errors.radioGroup}</div>
) : null}
</div>
<div className="l-bottom-l">
<label
htmlFor="profile-prefecture-id"
className="heading-form-label"
>
活動エリア
<span className="label-required">必須</span>
</label>
<div className="l-form-horizontal l-bottom-l location-select-input">
<div className="l-form-half">
<div className="select-line">
<Field
className="full js-prefLoad_parent"
name="prefecture"
component="select"
placeholder="選択してください"
>
<option value="選択してください">
選択してください
</option>
<option value="テスト1">テスト1</option>
<option value="テスト2">テスト2</option>
<option value="テスト3">テスト3</option>
</Field>
</div>
{errors.prefecture && touched.prefecture ? (
<div className="label-required">
{errors.prefecture}
</div>
) : null}
</div>
<div className="l-form-half">
<div className="select-line">
<Field
className="full js-prefLoad_child"
name="prefectureCity"
component="select"
placeholder="選択してください"
>
<option value="選択してください">
選択してください
</option>
<option value="テスト1">テスト1</option>
<option value="テスト2">テスト2</option>
<option value="テスト3">テスト3</option>
</Field>
</div>
{errors.prefectureCity && touched.prefectureCity ? (
<div className="label-required">
{errors.prefectureCity}
</div>
) : null}
</div>
</div>
</div>
<div className="l-bottom-l">
<label
htmlFor="profile-occupation-id"
className="heading-form-label"
>
職種<span className="label-required">必須</span>
</label>
<div className="l-form-term select-line">
<Field
className="full js-prefLoad_child"
name="occupation"
component="select"
placeholder="選択してください"
id="profile-occupation-id"
>
<option value="選択してください">
選択してください
</option>
<option value="テスト1">テスト1</option>
<option value="テスト2">テスト2</option>
<option value="テスト3">テスト3</option>
</Field>
</div>
{errors.occupation && touched.occupation ? (
<div className="label-required">{errors.occupation}</div>
) : null}
</div>
<div className="l-bottom-l sub_job_category">
<label
htmlFor="profile-sub-occupations"
className="heading-form-label"
>
その他に経験した職種
</label>
<div className="l-bottom-l sub_job_category">
{checkboxField}
</div>
</div>
<div className="l-bottom-l">
<label
htmlFor="profile-workstyle-id"
className="heading-form-label"
>
働き方<span className="label-required">必須</span>
</label>
<div className="l-form-term select-line">
<Field
name="workstyle"
component="select"
placeholder="選択してください"
id="profile-workstyle-id"
>
<option value="選択してください">
選択してください
</option>
<option value="テスト1">テスト1</option>
<option value="テスト2">テスト2</option>
<option value="テスト3">テスト3</option>
</Field>
</div>
{errors.workstyle && touched.workstyle ? (
<div className="label-required">{errors.workstyle}</div>
) : null}
</div>
<div className="l-bottom-l">
<label
htmlFor="profile-hourly-wage"
className="heading-form-label"
>
時給<span className="label-required">必須</span>
</label>
<div className="input-line">
<Field
type="number"
name="hourlyWage"
className="full"
placeholder="2,000"
/>
<span className="input-right-text">円</span>
</div>
{errors.hourlyWage && touched.hourlyWage ? (
<div className="label-required">{errors.hourlyWage}</div>
) : null}
<p className="wage-average js-wage-averageValue"></p>
</div>
<div className="l-bottom-l">
<label className="heading-form-label">所属企業名</label>
<div className="input-line company-input">
<Field
type="text"
name="company"
className="full"
placeholder="株式会社GIG"
/>
</div>
{errors.company && touched.company ? (
<div className="label-required">{errors.company}</div>
) : null}
</div>
<div>
<button
className="btn btn-primary"
type="submit"
// disabled={
// Object.keys(errors).length > 0 ||
// Object.keys(touched).length === 0
// }
>
STEP2 プロフィールを入力する
</button>
</div>
</Form>
)}
</Formik>
</div>
</div>
</div>
);
}
}
export default FormStep1;