Dalam tutorial ini kita akan membahas contoh checkbox onchange, contoh event. saya jelaskan selangkah demi selangkah checkbox onchange event dalam react js. Saya akan menunjukkan kepada Anda tentang react contoh kotak centang js. saya jelaskan saja tentang contoh kotak centang di react js.

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

Dalam contoh ini, kita akan mengambil "i_agree" sederhana dengan input kotak centang dan menambahkan acara pertukaran dengan handleChange() maka kita akan memberikan 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 = {
      i_agree: false
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
     
  handleChange(event) {
    this.setState({i_agree: !this.state.i_agree});
  }
     
  handleSubmit(event) {
    console.log(this.state);
    event.preventDefault();
  }
     
  render() {
    return (
      <div>
        <h1>React Checkbox onChange Example - Medikre.com</h1>
        <form onSubmit={this.handleSubmit}>
           
          <label>
            <input
              type="checkbox"
              defaultChecked={this.state.i_agree}
              onChange={this.handleChange}
            /> I Agree with this content...
          </label>
           
          <input type="submit" value="Submit" />
        </form>
      </div>
    );
  }
}
   
render(<App />, document.getElementById('root'));

Output:

{i_agree: true}

Saya harap ini dapat membantu Anda ...