Home » Javascript » Forms Pada ReactJS: Contoh dan Cara Membuatnya

Forms Pada ReactJS: Contoh dan Cara Membuatnya

Reviewed by Sutiono S.Kom., M.Kom., M.T.I
by syifaul fuadi
by syifaul fuadi

Sama seperti di HTML, ReactJS menggunakan form untuk memungkinkan pengguna berinteraksi dengan halaman web. Form sendiri sangat berguna untuk user dalam halam login, register, mencari kata, mengisi biodata dan banyak lagi. Disini kita akan membahas dan memberikan contoh cara membuat form tersebut. Untuk list nya bisa dilihat dibawah :

  1. Menambahkan Form Di React
  2. Penanganan Pada Form
  3. Rendering Sesuai Kondisi
  4. Mengirim Form
  5. Beberapa Contoh Bidang Input
  6. Memvalidasi Input Form
  7. Menambahkan Alert eError
  8. Menambahkan Text Area
  9. Cara Menggunakan Select

Dan berikut adalah penjelasan dan contoh syntax code nya :

No. 1 Menambahkan Form Di ReactJS

Anda dapat menambahkan formulir dengan ReactJS seperti elemen lainnya. Untuk menampilkan code anda harus membuat 2 file yaitu index.js dan index.html

Contoh :

index.js

import React from 'react';
import ReactDOM from 'react-dom';

class MyForm extends React.Component {
  render() {
    return (
      <form>
        <h1>Hello</h1>
        <p>Enter your name:</p>
        <input
          type="text"
        />
      </form>
    );
  }
}
ReactDOM.render(<MyForm />, document.getElementById('root'));

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport"
      content="width=device-width, initial-scale=1" />
    <title>React App</title>
  </head>
  <body>

    <div id="root"></div>

  </body>
</html>

Dan hasilnya adalah sebagai berikut :

No. 2 Penanganan Pada Form

Penanganan pada formulir adalah tentang bagaimana Anda menangani data saat itu untuk mengubah atau mengirimkan nilai. Dalam HTML, data formulir biasanya ditangani oleh DOM. Di React, data formulir biasanya ditangani oleh komponen. Ketika data ditangani oleh komponen, semua data disimpan dalam status komponen. Anda dapat mengontrol perubahan dengan menambahkan penangan kejadian di atribut onChange.

Contoh :

index.js

import React from 'react';
import ReactDOM from 'react-dom';

class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = { username: '' };
  }
  myChangeHandler = (event) => {
    this.setState({username: event.target.value});
  }
  render() {
    return (
      <form>
      <h1>Hello {this.state.username}</h1>
      <p>Enter your name:</p>
      <input
        type='text'
        onChange={this.myChangeHandler}
      />
      </form>
    );
  }
}

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

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport"
      content="width=device-width, initial-scale=1" />
    <title>React App</title>
  </head>
  <body>

    <div id="root"></div>

  </body>
</html>

Dan hasilnya adalah sebagai berikut :

Dan ketika kita mengisi form tersebut semisal kita isi dengan “DokterIT” maka disebelah kata Hello akan otomatis keisi nilai dengan kalimat “DokterIT” sesuai dengan apa yang kita tulis pada form tersebut. Berikut untuk hasil contoh nya :

No. 3 Rendering Sesuai Kondisi

Jika Anda tidak ingin menampilkan elemen h1 sampai pengguna selesai melakukan input apa pun, Anda dapat menambahkan pernyataan if.

Lihat contoh di bawah ini dan perhatikan hal-hal berikut:

  1. Kami membuat variabel kosong, dalam contoh ini kami menyebutnya header.
  2. Kami menambahkan pernyataan if untuk memasukkan konten ke variabel header jika pengguna telah melakukan input.
  3. Kami memasukkan variabel header dalam output, menggunakan tanda kurung kurawal.

Contoh :

index.js

import React from 'react';
import ReactDOM from 'react-dom';

class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = { username: '' };
  }
  myChangeHandler = (event) => {
    this.setState({username: event.target.value});
  }
  render() {
    let header = '';
    if (this.state.username) {
      header = <h1>Hello {this.state.username}</h1>;
    } else {
      header = '';
    }
    return (
      <form>
      {header}
      <p>Enter your name:</p>
      <input
        type='text'
        onChange={this.myChangeHandler}
      />
      </form>
    );
  }
}

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport"
      content="width=device-width, initial-scale=1" />
    <title>React App</title>
  </head>
  <body>

    <div id="root"></div>

  </body>
</html>

Hasilnya adalah sebagai berikut :

Pada hasil tampilan diatas tulisan “Hello” tidak muncul, akan tetapi ketika kita mengisi form tersebut dengan “DokterIT” saja, nanti kaliman Hello akan langsung otomatis muncul beserta kalimat “DokterIT”. Hasilnya adalah sebagai berikut :

No. 4 Mengirim Form

Anda dapat mengontrol tindakan kirim dengan menambahkan pengendali kejadian di atribut onSubmit.

Contoh :

index.js

import React from 'react';
import ReactDOM from 'react-dom';

class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = { username: '' };
  }
  mySubmitHandler = (event) => {
    event.preventDefault();
    alert("You are submitting " + this.state.username);
  }
  myChangeHandler = (event) => {
    this.setState({username: event.target.value});
  }
  render() {
    return (
      <form onSubmit={this.mySubmitHandler}>
      <h1>Hello {this.state.username}</h1>
      <p>Enter your name, and submit:</p>
      <input
        type='text'
        onChange={this.myChangeHandler}
      />
      <input
        type='submit'
      />
      </form>
    );
  }
}

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

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport"
      content="width=device-width, initial-scale=1" />
    <title>React App</title>
  </head>
  <body>

    <div id="root"></div>

  </body>
</html>

Dan hasilnya adalah sebagai berikut :

Ketika klik submit akan muncul alert seperti pada berikut ini :

Perhatikan bahwa kami menggunakan event.preventDefault () untuk mencegah formulir benar-benar dikirim.

No. 5 Beberapa Contoh Untuk Bidang Input

Anda dapat mengontrol nilai lebih dari satu bidang input dengan menambahkan atribut nama ke setiap elemen. Saat Anda menginisialisasi negara di konstruktor, gunakan nama bidang. Untuk mengakses kolom di event handler, gunakan sintaks event.target.name dan event.target.value. Untuk memperbarui status dalam metode this.setState, gunakan tanda kurung siku [notasi tanda kurung] di sekitar nama properti.

index.js

import React from 'react';
import ReactDOM from 'react-dom';

class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      username: '',
      age: null,
    };
  }
  myChangeHandler = (event) => {
    let nam = event.target.name;
    let val = event.target.value;
    this.setState({[nam]: val});
  }
  render() {
    return (
      <form>
      <h1>Hello {this.state.username} {this.state.age}</h1>
      <p>Enter your name:</p>
      <input
        type='text'
        name='username'
        onChange={this.myChangeHandler}
      />
      <p>Enter your age:</p>
      <input
        type='text'
        name='age'
        onChange={this.myChangeHandler}
      />
      </form>
    );
  }
}

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

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport"
      content="width=device-width, initial-scale=1" />
    <title>React App</title>
  </head>
  <body>

    <div id="root"></div>

  </body>
</html>

Dan hasilnya adalah sebagai berikut :

Hasil diatas yaitu memasukkan nama maka otomatis nama tersebut akan muncul di sebelah hello, dan dilanjutkan dengan mengisi umur .

No. 6 Memvalidasi Input Form

Anda dapat memvalidasi masukan formulir saat pengguna mengetik atau Anda dapat menunggu hingga formulir dikirimkan.

index.js

    super(props);
    this.state = {
      username: '',
      age: null,
    };
  }
  myChangeHandler = (event) => {
    let nam = event.target.name;
    let val = event.target.value;
    if (nam === "age") {
      if (!Number(val)) {
        alert("Your age must be a number");
      }
    }
    this.setState({[nam]: val});
  }
  render() {
    return (
      <form>
      <h1>Hello {this.state.username} {this.state.age}</h1>
      <p>Enter your name:</p>
      <input
        type='text'
        name='username'
        onChange={this.myChangeHandler}
      />
      <p>Enter your age:</p>
      <input
        type='text'
        name='age'
        onChange={this.myChangeHandler}
      />
      </form>
    );
  }
}

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

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport"
      content="width=device-width, initial-scale=1" />
    <title>React App</title>
  </head>
  <body>

    <div id="root"></div>

  </body>
</html>

Dan hasilnya adalah sebagai berikut :

Di bawah ini Anda akan melihat contoh yang sama seperti di atas, tetapi validasi dilakukan saat formulir dikirimkan, bukan saat Anda menulis di field.

index,js

import React from 'react';
import ReactDOM from 'react-dom';

class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      username: '',
      age: null,
    };
  }
  mySubmitHandler = (event) => {
    event.preventDefault();
    let age = this.state.age;
    if (!Number(age)) {
      alert("Your age must be a number");
    }
  }
  myChangeHandler = (event) => {
    let nam = event.target.name;
    let val = event.target.value;
    this.setState({[nam]: val});
  }
  render() {
    return (
      <form onSubmit={this.mySubmitHandler}>
      <h1>Hello {this.state.username} {this.state.age}</h1>
      <p>Enter your name:</p>
      <input
        type='text'
        name='username'
        onChange={this.myChangeHandler}
      />
      <p>Enter your age:</p>
      <input
        type='text'
        name='age'
        onChange={this.myChangeHandler}
      />
      <br/>
      <br/>
      <input type='submit' />
      </form>
    );
  }
}

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

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport"
      content="width=device-width, initial-scale=1" />
    <title>React App</title>
  </head>
  <body>

    <div id="root"></div>

  </body>
</html>

Dan hasilnya adalah sebagai berikut :

No. 7 Menambahkan Alert Error

Pesan kesalahan di kotak peringatan bisa mengganggu, jadi mari kita buat pesan kesalahan yang kosong secara default, tetapi menampilkan kesalahan ketika pengguna memasukkan sesuatu yang tidak valid.

Berikut syntax nya :

index.js

import React from 'react';
import ReactDOM from 'react-dom';

class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      username: '',
      age: null,
      errormessage: ''
    };
  }
  myChangeHandler = (event) => {
    let nam = event.target.name;
    let val = event.target.value;
    let err = '';
    if (nam === "age") {
      if (val !="" && !Number(val)) {
        err = <strong>Your age must be a number</strong>;
      }
    }
    this.setState({errormessage: err});
    this.setState({[nam]: val});
  }
  render() {
    return (
      <form>
      <h1>Hello {this.state.username} {this.state.age}</h1>
      <p>Enter your name:</p>
      <input
        type='text'
        name='username'
        onChange={this.myChangeHandler}
      />
      <p>Enter your age:</p>
      <input
        type='text'
        name='age'
        onChange={this.myChangeHandler}
      />
      {this.state.errormessage}
      </form>
    );
  }
}

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

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport"
      content="width=device-width, initial-scale=1" />
    <title>React App</title>
  </head>
  <body>

    <div id="root"></div>

  </body>
</html>

Dan hasilnya adalah sebagai berikut :

Dan ketika saya memasukkan “age” dengan huruf maka alert akan langsung tampil di sebalahnya, bukan “pop up”.

No. 8 Menambahkan Text Area

Elemen textarea di React sedikit berbeda dari HTML biasa. Dalam HTML, nilai textarea adalah teks antara tag awal dan tag akhir , dalam React nilai textarea ditempatkan dalam atribut nilai:

index.js

import React from 'react';
import ReactDOM from 'react-dom';

class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      description: 'The content of a textarea goes in the value attribute'
    };
  }
  render() {
    return (
      <form>
      <textarea value={this.state.description} />
      </form>
    );
  }
}

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

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport"
      content="width=device-width, initial-scale=1" />
    <title>React App</title>
  </head>
  <body>

    <div id="root"></div>

  </body>
</html>

Dan hasilnya adalah sebagai berikut :

No. 9 Cara Menggunakan Select

Daftar drop-down, atau kotak pilih, di React juga sedikit berbeda dari HTML. Dalam HTML, nilai yang dipilih dalam daftar drop-down ditentukan dengan atribut yang dipilih:

html

<select>
  <option value="Ford">Ford</option>
  <option value="Volvo" selected>Volvo</option>
  <option value="Fiat">Fiat</option>
</select>

Di React, nilai yang dipilih ditentukan dengan atribut nilai pada tag pilihan:

index.js

import React from 'react';
import ReactDOM from 'react-dom';

class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      mycar: 'Volvo'
    };
  }
  render() {
    return (
      <form>
      <select value={this.state.mycar}>
        <option value="Ford">Ford</option>
        <option value="Volvo">Volvo</option>
        <option value="Fiat">Fiat</option>
      </select>
      </form>
    );
  }
}

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

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport"
      content="width=device-width, initial-scale=1" />
    <title>React App</title>
  </head>
  <body>

    <div id="root"></div>

  </body>
</html>

Dan hasilnya adalah sebagai berikut :

You may also like

12 Framework JavaScript Terbaik

5 Sertifikasi JavaScript dan Penjelasannya

Framework Javascript : Angular.js Vs React.js Vs Node.js...

jQuery Vs JavaScript : Perbedaan – Kelebihan dan...

Perbedaan Node .js dan Angular JS

Pengembangan Web: Pengenalan Singkat tentag JavaScript ( Kamus...

10+ Buku JavaScript Terbaik Untuk Pemula Dan Profesional

Membuat Javascript Alert : SweetAlert

Menambahkan Markers Pada Peta LeafletJS

Menambahkan Peta di Halaman Website (dasar leaflet.js)

Leave a Comment

Save my name, email, and website in this browser for the next time I comment.