[React] # 8 Form

HTMLフォームの別名の動作は、Reactの他のDOM別名とは異なります.それ自体が内部状態を持っているためです.フォームをコミットすると、デフォルトのHTMLフォームの動作が新しいページに移動します.ほとんどの場合、JavaScript関数を使用してフォームのコミットを処理し、ユーザーがフォームに入力したデータにアクセスするように制御します.

せいぎょようそ

変更可能なステータスは、通常、構成部品のステータスプロパティに保持され、setState()またはusState()によって更新されます.したがって、stateを<input>のonChangeプロパティと<form>のonSubmitプロパティで更新および管理し、inputの値を他のUIエイリアスに渡すか、他のイベントハンドラで値をリセットできます.
👉🏻 React Official Form
正式なドキュメントでは、Htmlとの違い、React環境での使用方法、およびComputed Property nameによる状態の簡略化について説明します.

function NameForm (props) {
  const [value, setValue] = React.useState('');
  
  function handleChange(event) {
    setValue(event.target.value);
  }
  
  function handleSubmit(event) {
    event.preventDefault();
    alert('A name was submitted: ' + value);
  }
  
  return (
      <form onSubmit={handleSubmit}>
        <label>
          Name:
          <input type="text" value={value} onChange={handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
}

ReactDOM.render(
  <NameForm />,
  document.getElementById('root')
);

Formik

FormikはReact Nativeにおける構成要素の構築に用いられるReactコンポーネントとhooksのグループである.インストールにより、検証、アクセス済みフィールドの追跡、フォームのコミットの処理などのプロセスを簡素化し、制御構成部品とステータス管理に基づいて使用できます.
👉🏻 Formikを使用した会員登録の例

フォーム内部から入力変化と状態取得値

認証およびエラーメッセージ

フォームsubmitハンドル

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

 import React from 'react';
 import { useFormik } from 'formik';
 
 const SignupForm = () => {
   // 데이터 형식에 맞추어 초기화하여 react에서 초기 렌더링 시 발생할 수 있는 에러를 방지합니다.
   const formik = useFormik({
     initialValues: {
       firstName: '',
       lastName: '',
       email: '',
     },
     onSubmit: values => {
       alert(JSON.stringify(values, null, 2));
     },
   });
   return (
     <form onSubmit={formik.handleSubmit}>
       <label htmlFor="firstName">First Name</label>
       <input
         id="firstName"
         name="firstName"
         type="text"
         onChange={formik.handleChange}
         value={formik.values.firstName}
       />
 
       <label htmlFor="lastName">Last Name</label>
       <input
         id="lastName"
         name="lastName"
         type="text"
         onChange={formik.handleChange}
         value={formik.values.lastName}
       />
 
       <label htmlFor="email">Email Address</label>
       <input
         id="email"
         name="email"
         type="email"
         onChange={formik.handleChange}
         value={formik.values.email}
       />
 
       <button type="submit">Submit</button>
     </form>
   );
 };

useFormik hookはformik変数でフォームの状態と様々なhelperメソッドを返します.典型的な方法は3つあります.

HandleSubmit:onSubmit Handler

ハンドル交換:各ハンドル<input>、<select>または<textarea>の交換ハンドル

.

値:<input>の現在値

この方法では、以前のHTMLフォーマットのように制御し、初期値で設定したキー値と同じ値に設定して、一致するIDと名前のHTMLプロパティを渡すことができます.したがって、同じ名前(email->formik.values.email)を使用して、対応する入力にアクセスできます.

const [values, setValues] = React.useState({});
 
const handleChange = event => {
  setValues(prevValues => ({
    ...prevValues,
    // 업데이트 할 `values`의 키를 formik에게 전달하기 위해 name prop을 사용
    [event.target.name]: event.target.value
  });
}

ES 6の計算属性name構文は、<input>のnameに基づいている.既存の値と更新値をステータスで管理します.

検証＃ケンショウ＃

基本Htmlには3つの制限があります.
まず、ブラウザでしか実行できないため、React Native環境では制限があります.
第二に、指定したユーザと完全に一致するエラーメッセージを表示することは困難であるか、不可能である.
第三に、動作にはぼろぼろとおかしい.
Formikは、フォームの値だけでなく、フォームの検証とエラーメッセージも追跡できます.JSに検証を追加するには、検証関数を宣言し、ユーザーFormik()Hookに転送して検証します.検証関数は、値と初期値と同じ形状のエラーオブジェクトを作成します.

// 유효성 검증 함수 
// values와 initialValues와 똑같은 모양의 오류 객체 리턴
const validate = values => {
   const errors = {};
 
   if (!values.firstName) {
     errors.firstName = '필수 작성 항목입니다';
   } else if (values.firstName.length > 15) {
     errors.firstName = '15자 이내로 작성해주세요';
   }
 
   if (!values.lastName) {
     errors.lastName = '필수 작성 항목입니다';
   } else if (values.lastName.length > 20) {
     errors.lastName = '20자 이내로 작성해주세요';
   }
 
   if (!values.email) {
     errors.email = '필수 작성 항목입니다';
   } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
     errors.email = '유효하지 않은 이메일 양식입니다';
   }
 
   return errors;
 };
 
 const SignupForm = () => {
   const formik = useFormik({
     initialValues: {
       firstName: '',
       lastName: '',
       email: '',
     },
     validate,
     onSubmit: values => {
       alert(JSON.stringify(values, null, 2));
     },
   });
   return (
     <form onSubmit={formik.handleSubmit}>
       <label htmlFor="firstName">First Name</label>
       <input
         id="firstName"
         name="firstName"
         type="text"
         onChange={formik.handleChange}
         onBlur={formik.handleBlur}
         value={formik.values.firstName}
       />
       // 유효성 메세지 부분
       {formik.touched.firstName && formik.errors.firstName ? (
         <div>{formik.errors.firstName}</div>
       ) : null}
 
       <label htmlFor="lastName">Last Name</label>
       <input
         id="lastName"
         name="lastName"
         type="text"
         onChange={formik.handleChange}
         onBlur={formik.handleBlur}
         value={formik.values.lastName}
       />
       // 유효성 메세지 부분
       {formik.touched.lastName && formik.errors.lastName ? (
         <div>{formik.errors.lastName}</div>
       ) : null}
 
       <label htmlFor="email">Email Address</label>
       <input
         id="email"
         name="email"
         type="email"
         onChange={formik.handleChange}
         onBlur={formik.handleBlur}
         value={formik.values.email}
       />
       // 유효성 메세지 부분
       {formik.touched.email && formik.errors.email ? (
         <div>{formik.errors.email}</div>
       ) : null}
       <button type="submit">Submit</button>
     </form>
   );
 };

また、使用時には、Yupという追加ライブラリでコードを簡略化することもできます.検証関数を簡単に置き換えることができます.

npm install yup --save

const formik = useFormik({
     initialValues: {
       firstName: '',
       lastName: '',
       email: '',
     },
     // 안으로 들어가버린 유효성 검증 함수, 보다 간결해진 코드!
     validationSchema: Yup.object({
       firstName: Yup.string()
         .max(15, 'Must be 15 characters or less')
         .required('Required'),
       lastName: Yup.string()
         .max(20, 'Must be 20 characters or less')
         .required('Required'),
       email: Yup.string().email('Invalid email address').required('Required'),
     }),
     onSubmit: values => {
       alert(JSON.stringify(values, null, 2));
     },
   });

Reducing Boilerplate

getFieldProps()メソッドは、汎用コードのコード量を減らすことができます.

<label htmlFor="firstName">First Name</label>
<input
  id="firstName"
  name="firstName"
  type="text"
  onChange={formik.handleChange}
  onBlur={formik.handleBlur}
  value={formik.values.firstName}
/>
{formik.touched.firstName && formik.errors.firstName ? (
<div>{formik.errors.firstName}</div>
) : null}
       
       
       
<label htmlFor="firstName">First Name</label>
<input
  id="firstName"
  type="text"
  {...formik.getFieldProps('firstName')}
/>
{formik.touched.firstName && {formik.touched.firstName && formik.errors.firstName ? (
<div>{formik.errors.firstName}</div>
) : null}
     

onBlor、onFocusイベント

Json Object関連メソッド

React Context