ReactJS | 6. Menambahkan input collection

 6. Menambahkan input collection

---

Menambahkan Control Baru Ke Input Collection

Pada bagian ini akan membuat control input baru pada InputCollection

Input Checkbox

export const InputCheckbox = ({
                                  label , control, name,  required, rules, errors,
                              }) => {
    return <>
        <Controller
            control={control}
            render={({ onChange, onBlur, value }) => (
                <div className={"form-group " + (required ? "required" : "")}>
                    <label className="col-md-3 control-label">{label}</label>
                    <div className="col-md-8">

                        <input type="checkbox" onChange={() => {
                            onChange(value ? !value :  true)
                        }} checked={value ||  false} />
                        <ErrorMessage
                            errors={errors}
                            name={name}
                            render={({ message }) => <div className="text-danger pt-2">
                                <span >{message}</span>
                            </div>}
                        />
                    </div>
                </div>
            )}
            name={name}
            rules={rules}
        />
    </>
}

Keterangan

deklarasi fungsi

export const InputCheckbox = ({
                                  label , control, name,  required, rules, errors,
                              }) => {

InputCheckbox adalah nama komponent
label , control, name, required, rules, errors adalah parameter yang harus di miliki oleh input collection

deklarasi controller

<Controller
            control={control}
            render={({ onChange, onBlur, value }) => (

Controller adalah komponent yang membungkus semua input collection
control adalah pengatur dari input tersebut
onChange adalah fungsi callback yang di panggil ketika ada perubahan di form
onBlur adalah fungsi callback yang di panggil ketika ada perubahan di form ketika cursor keluar dari input

deklarasi Error

<ErrorMessage
                           errors={errors}
                           name={name}
                           render={({ message }) => <div className="text-danger pt-2">
                               <span >{message}</span>
                           </div>}
                       />

ErrorMessage adalah component untuk memproses error dari react-hook-form

name={name}
rules={rules}

name adalah name yang di berikan ke input
rules adalah rules validasi yang di berikan sehingga input dapat di kelola oleh react-hook-form

deklarasi input

<input type="checkbox" onChange={() => {
                            onChange(value ? !value :  true)
                        }} checked={value ||  false} />

fugnsi input sebenarnya yang di gunakan untuk melakukan input pada blok code ini yang perludigunakan hanya onChange yang dimana di gunakan oleh code untuk mengambil data yang di inputkan

ReactJS | 4. Input Collection

 4. Input Collection

---

Penggunaan Input Collection

Input collection di gunakan oleh react sudah dibuatkan liblary ui kecilnya yang ada di file InputCollection.js

Membuat Controller

Tambahkan Controller semisal TestReactCtr.java pada package controllers dengan fungsi index yang akan mererender index.html

...
public static void inputCollection() {
        render();
    }
...

Tambahkan route

GET /testreact-inputcollection                                       TestReactCtr.inputCollection

Tambahkan view

tambahkan view pada folder TestReactCtr/inputCollection.html

#{extends 'border.html'/}
<div class="container-fluid">
    <!-- Toolbar -->
    <div class="row">
        <div class="col-md-12">
            <!-- Breadcrumb -->
            <ol class="breadcrumb">
                <li><a href="@{PublikCtr.home()}">&{'beranda.label'}</a></li>
                <li class="active">&{'daftar_distributor.label'}</li>
            </ol>
            <!-- End Breadcrumb -->
        </div>
    </div>
    <!-- End Toolbar -->
    #{alert /}
    <div class="row">
        <div class="col-md-12">
          <!-- content --->

            <div id="rx-test-react-input-collection-page-container"></div>
        </div>
    </div>

</div>

id pada div adalah id yang akan digunakan oleh react untuk melakukan mounting component

Tambahkan React View

tambahkan React view dengan file TestReactInputCollectionPage.js pada folder page

import React from 'react';
    import {useForm} from "react-hook-form";
    import {
    InputDateWithLabel,
    InputFormatted,
    InputTextArea,
    InputWithLabel ,
    Select2WithLabel
} from "../Components/InputCollection";
    import {useTranslation} from "react-i18next";

    export const TestReactInputCollectionPage = () => {
        const {
            handleSubmit,
            control,
            watch,
            formState: { errors },
            setValue,
        } = useForm();

        const { t, i18n } = useTranslation()
        const rules = {required: {value: true, message: t('field_ini_harus_di_isi.label')}}

        return (
            <>
                <InputWithLabel
                    label={"Input Text"}
                    control={control}
                    errors={errors}
                    name={"text"}
                />
                <InputWithLabel
                    label={"Input number"}
                    control={control}
                    type={"number"}
                    errors={errors}
                    name={"number"}
                />
                <InputDateWithLabel
                    label={"Input Date"}
                    control={control}
                    type={"number"}
                    errors={errors}
                    name={"date"}
                />
                <Select2WithLabel
                    label={"Select 2 Data"}
                    control={control}
                    type={"number"}
                    errors={errors}
                    options={[
                        {
                            "label" : "DATA",
                            "value" : "DATA"
                        },
                        {
                            "label" : "DATA2",
                            "value" : "DATA"
                        },
                        {
                            "label" : "DATA3",
                            "value" : "DATA"
                        },
                        {
                            "label" : "DATA4",
                            "value" : "DATA"
                        },
                    ]}
                    name={"selectdata"}
                />
                <InputDateWithLabel
                    label={"Input Date Ga Booleh Backdate"}
                    control={control}
                    type={"number"}
                    errors={errors}
                    allowBackdate={false}
                    name={"date"}
                />
                <InputFormatted
                    label={"InputFormatted"}
                    control={control}
                    type={"number"}
                    errors={errors}
                    format={"+##-###########"}
                    name={"numberformatted"}
                />
                <InputTextArea
                    label={"TextArea"}
                    control={control}
                    type={"number"}
                    errors={errors}
                    name={"textarea"}
                />
                <InputFormatted
                    label={t('nomor_telp.label')}
                    control={control}
                    errors={errors}
                    name={"no_telp"}
                    type={"tel"}
                    required={true}
                    rules={{...rules, ... { maxLength: {value: 13 ,message: t('format_telepon_salah.label')},  minLength: {value: 7 ,message: t('format_telepon_salah.label')}}}}
                    placeholder={t('nomor_telepon.label')}
                />

            </>
        )
    }

Tulisan helloworld bisa di ganti

Tambahkan Loader pada index.js

if (document.getElementById('rx-test-react-input-collection-page-container')) {
    const container = document.getElementById("rx-test-react-input-collection-page-container")
    ReactDOM.render(<TestReactInputCollectionPage />, container)
}

Jalankan build react

npm run start

Refresh halaman adan akan muncul tampilan helloworld