Hari ini, react js select dropdown onchange event adalah topik utama kami. jika Anda ingin melihat contoh r eact select dropdown onchange maka Anda adalah tempat yang tepat. Saya akan menunjukkan kepada Anda tentang contoh tutorial react select. Kita akan melihat contoh react select box.

Jika Anda baru react js maka Anda ingin melihat cara menggunakan select dropdown di aplikasi react. tetapi sangat mudah untuk menggunakan input selectbox di react js app. Anda dapat menggunakannya seperti yang Anda gunakan dalam html dan Anda harus menulis event perubahan di atasnya. menggunakan event perubahan itu Anda harus menyimpan nilai ke dalam bentuk formulir. sehingga Anda bisa mendapatkan data itu di kirim.

Dalam contoh ini, kita akan mengambil kotak pilih "category" sederhana dan menambahkan event pertukaran dengan handleChange() maka kita akan menetapkan nilai pada array variabel status. Kemudian pada ajukan acara kita akan mengambil nilai-nilai itu dengan variabel status.

Jadi, mari kita lihat di bawah pratinjau dan kode:

Example Code:

import React, { Component } from 'react';
import { render } from 'react-dom';
    
class App extends Component {
  constructor() {
    super();
    this.state = {
      category: 'php'
    };
     
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
    
  handleChange(event) {
    this.setState({category: event.target.value});
  }
    
  handleSubmit(event) {
    console.log(this.state);
    event.preventDefault();
  }
    
  render() {
    return (
      <div>
        <h1>React Select Dropdown onChange Example - Medikre.com</h1>
        <form onSubmit={this.handleSubmit}>
          
          <strong>Select Category:</strong>
          <select value={this.state.category} onChange={this.handleChange}>
            <option value="php">PHP</option>
            <option value="laravel">Laravel</option>
            <option value="angular">Angular</option>
            <option value="react">React</option>
            <option value="vue">Vue</option>
          </select>
  
          <input type="submit" value="Submit" />
        </form>
      </div>
    );
  }
}
  
render(<App />, document.getElementById('root'));

Output:

{category: "react"}

Saya harap ini dapat membantu Anda ...