Form Processing Pada ReactJS

Ketika berkaitan dengan Form, ada banyak sekali cara implementasi yang perlu kita ketahui pada ReactJS. Tidak ada benar ataupun salah, selama kita dapat memproses form dengan nyaman dan mudah untuk dikelola nantinya, pemrosesan form dapat diimplementasi sesuai dengan keinginan kita.

Hal penting yang perlu diketahui saat memproses form di ReactJS

1. Kita dapat menggunakan state untuk menyimpan nilai input dari form.
2. Kita dapat menggunakan event handlers seperti onChange untuk menangani perubahan pada input form.
3. Kita dapat menggunakan event handlers seperti onSubmit untuk menangani submit form.
4. Kita dapat menggunakan library seperti Formik atau React-Form untuk membuat proses penginputan form lebih mudah.
5. Pastikan untuk menambahkan atribut "name" pada setiap input untuk dapat mengambil nilai dari form tersebut.
6. Ingat untuk meng-handle validasi dan error pada form.
7. Ingat untuk meng-handle loading state saat form sedang dikirim.

Cara Implementasi Form di ReactJS

Memanfaatkan state

Cara termudah untuk membuat form di ReactJS seperti berikut:

import React, { useState } from 'react';

const LoginForm = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('Email:', email);
    console.log('Password:', password);
    // Tulis kode lainnya disini, seperti mengirimkan request menggunakan axios
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Email:
        <input
          type="email"
          value={email}
          onChange={(event) => setEmail(event.target.value)}
        />
      </label>
      <br />
      <label>
        Password:
        <input
          type="password"
          value={password}
          onChange={(event) => setPassword(event.target.value)}
        />
      </label>
      <br />
      <button type="submit">Login</button>
    </form>
  );
};

export default LoginForm;

Pada contoh di atas, komponen menggunakan hook useState untuk menyimpan nilai dari input email dan password pada state variable email dan password secara masing-masing. Fungsi handleSubmit akan dipanggil saat form dikirim dan akan mencegah aksi default dari form dan menampilkan email dan password yang dimasukkan ke dalam console.

Memanfaatkan event dari onSubmit

import React, { useState } from 'react';

const LoginForm = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault();
    const formData = new FormData(event.target);
    console.log("Email: ",formData.get("email"))
    console.log("Password: ",formData.get("password"))
    // Tulis kode lainnya disini, seperti mengirimkan request menggunakan axios
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Email:
        <input
          type="email"
          name="email"
          value={email}
          onChange={(event) => setEmail(event.target.value)}
        />
      </label>
      <br />
      <label>
        Password:
        <input
          type="password"
          name="password"
          value={password}
          onChange={(event) => setPassword(event.target.value)}
        />
      </label>
      <br />
      <button type="submit">Login</button>
    </form>
  );
};

export default LoginForm;

Pada contoh di atas, fungsi handleSubmit akan dipanggil saat form dikirim, dan akan mencegah aksi default dari form. Kemudian akan dibuat object FormData baru dengan menuliskan event.target sebagai argumen pertama. Nilai input dapat diakses dengan menggunakan method get dengan nama input sebagai parameter.

Pastikan untuk menambahkan atribut name pada elemen input, sehingga nilai input dapat diakses pada event. Jika kita perhatikan, kedua input yang kita buat diatas sama dengan contoh yang sebelumnya, hanya saja dia memiliki atribut name pada setiap elemen input yang dibuat.

Kita juga dapat menggunakan event.target.elements untuk mengakses nilai input, namun tidak disarankan untuk menggunakannya karena tidak didukung oleh semua browser.

Memanfaatkan event.target.elements dari onSubmit

Meskipun tidak didukung oleh semua browser kita juga perlu mengetahui cara implementasinya bukan? berikut contohnya:

import React, { useState } from 'react';

const LoginForm = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault();
    const emailValue = event.target.elements.email.value;
    const passwordValue = event.target.elements.password.value;
    console.log("Email: ", emailValue);
    console.log("Password: ", passwordValue);
    // Tulis kode lainnya disini, seperti mengirimkan request menggunakan axios
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Email:
        <input
          type="email"
          name="email"
          value={email}
          onChange={(event) => setEmail(event.target.value)}
        />
      </label>
      <br />
      <label>
        Password:
        <input
          type="password"
          name="password"
          value={password}
          onChange={(event) => setPassword(event.target.value)}
        />
      </label>
      <br />
      <button type="submit">Login</button>
    </form>
  );
};

export default LoginForm;

Pada contoh di atas, fungsi handleSubmit akan dipanggil saat form dikirim, dan akan mencegah aksi default dari form. Kemudian nilai dari input akan diakses dengan mengakses properti elements dari event target, yang berisi semua elemen form, dan dengan menggunakan nama input sebagai properti. Nilai dari input diakses dengan mengambil properti value dari elemen tersebut.

Pastikan untuk menambahkan atribut name pada elemen input, sehingga nilai input dapat diakses pada event.

Semoga Bermanfaat!