React Form sedikit berbeda dengan HTML Form, React memperkenalkan konsep controlled component dan uncontrolled component.

Controlled Components

Pada HTML, data dari sebuah form dihandle oleh DOM.

Tetapi pada React, data atau value dari setiap element di dalam form di simpan dalam component state.

Sebuah element HTML yang valuenya dikontrol oleh React disebut controlled component, selain itu disebut uncontrolled component.

Contoh membuat form di React:

Copy
1import React, { useState } from 'react';
2
3export default function App() {
4  const [state, setState] = useState('');
5
6  const handleSubmit = () => {
7    alert(`Hi ${state}`);
8  };
9
10  const handleChange = (e) => {
11    setState(e.target.value);
12  };
13
14  return (
15    <div>
16      <h1>Masukan Nama</h1>
17      <form onSubmit={handleSubmit}>
18        <label>
19          Nama:
20          <input type="text" value={state} onChange={handleChange} />
21        </label>
22        <input type="submit" value="Submit" />
23      </form>
24    </div>
25  );
26}

Pada code di atas value dari element <input> disimpan dalam state dan diupdate menggunakan setState(), handler handleSubmit() dieksekusi ketika form disubmit.

e adalah event object, salah satu propertiesnya adalah e.target yang mewakili sebuah element DOM

Sedangkan e.target.value mewakili value dari sebuah element DOM

Uncontrolled Components

<input type="file" /> adalah contoh dari uncontrolled component, karena value tersebut tidak dikontrol oleh React maka untuk mengakses file kita harus menggunakan File API dan Refs.

Refs

Refs dapat digunakan untuk mengakses react element di dalam method render.

Untuk membuat Refs kita menggunakan React.createRef() yang dipasang ke sebuah elemen lewat atribut ref.

Copy
1import React from "react";
2
3export default function App() {
4  const fileInput = React.createRef();
5
6  const handleSubmit = (e) => {
7    e.preventDefault();
8    alert(`Nama file: ${e.fileInput.current.files[0].name}`);
9  };
10
11  return (
12    <div>
13      <h1>Upload File</h1>
14      <form onSubmit={handleSubmit}>
15        <label>
16          Pilih File 
17          <input type="file" ref={fileInput} style={{marginLeft: "5px"}} />
18        </label>
19      </form>
20    </div>
21  );
22}