Tombol nonaktifkan jika dropdown tidak dipilih javascript

Setelah proses selesai, Anda dapat memberi tahu pengguna bahwa mereka bebas untuk memasukkan atau mengubah bidang teks saat ini. Lakukan ini dengan membuat fungsi penangan kejadian lain yang melakukan sebaliknya—yaitu, mengaktifkan komponen UI

1enableComponents() {
2  this.setState({
3    isDisabled: false
4  });
5}

javascript

Simulasi Proses

Untuk mensimulasikan bahwa "sesuatu sedang terjadi", tambahkan kode di

1<input type="text" disabled={this.state.isDisabled} />

1<button disabled={this.state.isDisabled}>
2  Submit Query
3</button>

1handleSubmitClicked() {
2  this.setState({
3    isDisabled: true
4  });
5
6  setTimeout(
7    function() {
8      this.enableComponents()
9    }.bind(this),
10    3000
11  );
12}

javascript

Perhatikan bahwa Anda akan memanggil

1<input type="text" disabled={this.state.isDisabled} />

1<input type="text" disabled={this.state.isDisabled} />

1<button disabled={this.state.isDisabled}>
2  Submit Query
3</button>

1<button disabled={this.state.isDisabled}>
2  Submit Query
3</button>

Kode Keseluruhan

Formulir komponen terakhir Anda akan terlihat seperti berikut

1import React from 'react';
2
3export default class SearchComponent extends React.Component {
4  constructor(props) {
5    super(props);
6
7    this.state = {
8      isDisabled: false
9    }
10  }
11
12  handleSubmitClicked() {
13    this.setState({
14      isDisabled: true
15    });
16
17    setTimeout(
18      function() {
19        this.enableComponents()
20      }.bind(this),
21      3000
22    );
23  }
24
25  enableComponents() {
26    this.setState({
27      isDisabled: false
28    });
29  }
30
31  render() {
32    return (
33      <div>
34        <input type="text" disabled={this.state.isDisabled} />
35        <button 
36          disabled={this.state.isDisabled}
37          onClick={this.handleSubmitClicked.bind(this)}
38        >
39          Submit Query
40        </button>
41      </div>
42    );
43  }
44}

javascript

Coba komponen ini dan perhatikan bahwa saat mengklik Kirim Permintaan, elemen masukan dan tombol akan dinonaktifkan, dan setelah tiga detik akan diaktifkan kembali

Kesimpulan

Panduan ini mendemonstrasikan cara sederhana untuk menyampaikan kepada pengguna bahwa sesuatu sedang terjadi setelah mengeklik tombol dengan mempertahankan variabel status boolean yang berfungsi sebagai nilai untuk visibilitas UI. Cobalah untuk melihat apakah Anda dapat menggabungkan teknik ini ke komponen React stateful Anda sendiri dengan memiliki satu variabel status yang mengatur aksesibilitas antarmuka Anda. Beberapa saran adalah

Bagaimana Anda menonaktifkan tombol secara kondisional?

Bagaimana Anda menonaktifkan tombol ketika tombol lain diklik JavaScript?

Bagaimana cara menonaktifkan tombol di JavaScript?

Bagaimana cara menonaktifkan satu opsi dalam dropdown?