Metode Form Dalam React

Sama seperti di HTML, React menggunakan form untuk memungkinkan pengguna berinteraksi dengan halaman web.

Menambahkan Form dalam React

Kamu menambahkan form dengan React seperti elemen lainnya:

Contoh:

Tambahkan form yang memungkinkan pengguna memasukkan nama mereka:

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'));

Handling Form

Menangani form adalah tentang bagaimana kamu menangani data saat nilai berubah atau dikirimkan.

Dalam HTML, form data biasanya ditangani oleh DOM.

Dalam React, formulir data biasanya ditangani oleh komponen.

Ketika data ditangani oleh komponen, semua data disimpan dalam komponen state.

kamu dapat mengontrol perubahan dengan menambahkan penangan acara di atribut onChange:

Contoh:

Tambahkan event handler di atribut onChange, dan biarkan event handler memperbarui objek state:

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'));

Catatan: kamu harus menginisialisasi metode state constructor sebelum dapat menggunakannya.

Catatan: Kamu  mendapatkan akses ke nilai bidang dengan menggunakan sintaks event.target.value.

Syarat Rendering

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

Lihatlah contoh di bawah ini dan perhatikan hal berikut:

  1. Kita membuat variabel kosong, dalam contoh ini kita menyebutnya header.
  • Kita menambahkan pernyataan jika untuk memasukkan konten ke variabel headerjika pengguna telah melakukan input apa pun.
  • Kita memasukkan variabel headerdalam output, menggunakan kurung keriting.

Contoh:

Tampilkan tajuk hanya jika nama pengguna ditentukan:

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>
    );
  }
}
 
ReactDOM.render(<MyForm />, document.getElementById('root'));

Submitting Formulir

Kamu dapat mengontrol tindakan submit dengan menambahkan pengendali aktivitas di atribut onSubmit:

Contoh:

Tambahkan tombol submit dan event handler di atribut onSubmit:

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'));

Perhatikan bahwa kita menggunakan event.preventDefault()untuk mencegah formulir agar tidak benar-benar dikirimkan.

Beberapa Kolom Input

Kamu dapat mengontrol nilai lebih dari satu bidang input dengan menambahkan atribut nameke setiap elemen.

Saat kamu menginisialisasi keadaan di konstruktor, gunakan nama bidang.

Untuk mengakses bidang dalam pengendali event gunakan event.target.namedan sintaks event.target.value.

Untuk memperbarui keadaan dalam metode this.setState  ini, gunakan tanda kurung siku [notasi braket] di sekitar nama properti.

Contoh:

Tulis formulir dengan dua bidang input:

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'));

Catatan:kita menggunakan fungsi event handler yang sama untuk kedua bidang input, kita bisa menulis satu event handler untuk masing-masing, tetapi memberi koita kode yang lebih bersih dan merupakan cara yang lebih disukai dalam React JS.

Memvalidasi Input Formulir

Kamu bisa memvalidasi input formulir saat pengguna mengetik atau kamu bisa menunggu hingga formulir dikirimkan.

Contoh:

Ketika kamu mengisi usia kamu, kamu akan mendapatkan peringatan jika bidang usia tidak numerik:

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;
    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'));

Di bawah ini kamu akan melihat contoh yang sama seperti di atas, tetapi validasi dilakukan ketika formulir di submit alih-alih saat kamu menulis di field.

Contoh:

Contoh yang sama, tetapi dengan validasi pada formulir submit:

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'));

Menambahkan Pesan Error

Pesan error dalam kotak peringatan bisa mengganggu, jadi mari kita membuat pesan error yang kosong secara default, tetapi menampilkan error saat pengguna memasukkan sesuatu yang tidak valid:

Contoh:

Ketika kamu mengisi usia kamu tetapi bukan angka, pesan error dimunculkan:

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 !="" &amp;&amp; !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'));

Textarea

Elemen textarea di React JS sedikit berbeda dari HTML biasa.

Dalam HTML nilai textarea adalah teks antara tag awal <textarea> dan tag akhir </textarea>, di React JS nilai sebuah textarea ditempatkan dalam atribut nilai:

Contoh:

Paket teks sederhana dengan beberapa konten yang diinisialisasi dalam konstruktor:

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'));

Select

Daftar drop-down, atau kotak select, di React juga sedikit berbeda dari HTML.

dalam HTML, nilai yang dipilih dalam daftar drop-down didefinisikan dengan atribut selected:

HTML:

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

Di React, nilai yang dipilih didefinisikan dengan atribut value pada tag select:

Contoh:

Kotak select sederhana, tempat nilai yang dipilih “Volvo” diinisialisasi dalam konstruktor:

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'));