Bereaksi pengguna, inilah jawaban untuk kelengkapannya.
Bereaksi versi 16.4.2
Anda ingin memperbarui untuk setiap penekanan tombol, atau mendapatkan nilainya hanya saat mengirim. Menambahkan acara utama ke komponen berfungsi, tetapi ada alternatif seperti yang direkomendasikan dalam dokumen resmi.
Komponen yang dikendalikan vs yang tidak terkontrol
Terkendali
Dari Documents - Formulir dan Komponen yang dikendalikan :
Dalam HTML, bentuk elemen seperti input, textarea, dan pilih biasanya mempertahankan negara mereka sendiri dan memperbaruinya berdasarkan input pengguna. Dalam Bereaksi, keadaan yang dapat berubah biasanya disimpan di properti komponen, dan hanya diperbarui dengan setState ().
Kita dapat menggabungkan keduanya dengan menjadikan negara Bereaksi menjadi "sumber kebenaran tunggal". Kemudian komponen Bereaksi yang membuat formulir juga mengontrol apa yang terjadi di formulir itu pada input pengguna berikutnya. Elemen formulir input yang nilainya dikendalikan oleh Bereaksi dengan cara ini disebut "komponen yang dikendalikan".
Jika Anda menggunakan komponen yang dikontrol Anda harus menjaga keadaan diperbarui untuk setiap perubahan nilai. Agar ini terjadi, Anda mengikat pengendali acara ke komponen. Dalam contoh-contoh dokumen, biasanya acara onChange.
Contoh:
1) Bind event handler dalam konstruktor (nilai disimpan dalam keadaan)
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
}
2) Buat fungsi handler
handleChange(event) {
this.setState({value: event.target.value});
}
3) Buat fungsi kirim formulir (nilai diambil dari negara)
handleSubmit(event) {
alert('A name was submitted: ' + this.state.value);
event.preventDefault();
}
4) Memberikan
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" value={this.state.value} onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
Jika Anda menggunakan komponen yang dikendalikan , AndahandleChange fungsi akan selalu diaktifkan, untuk memperbarui dan mempertahankan kondisi yang tepat. Negara akan selalu memiliki nilai yang diperbarui, dan ketika formulir dikirimkan, nilai akan diambil dari negara. Ini mungkin menjadi penipu jika formulir Anda sangat panjang, karena Anda harus membuat fungsi untuk setiap komponen, atau menulis yang sederhana yang menangani perubahan nilai setiap komponen.
Tidak terkendali
Dari Documents - komponen yang tidak terkontrol
Dalam kebanyakan kasus, kami merekomendasikan penggunaan komponen yang terkontrol untuk mengimplementasikan formulir. Dalam komponen yang dikendalikan, formulir data ditangani oleh komponen Bereaksi. Alternatifnya adalah komponen yang tidak terkontrol, di mana formulir data ditangani oleh DOM itu sendiri.
Untuk menulis komponen yang tidak terkontrol, alih-alih menulis pengendali acara untuk setiap pembaruan keadaan, Anda bisa menggunakan referensi untuk mendapatkan nilai formulir dari DOM.
Perbedaan utama di sini adalah bahwa Anda tidak menggunakan onChangefungsi, tetapi lebih onSubmitpada formulir untuk mendapatkan nilai, dan memvalidasi jika perlu.
Contoh:
1) Bind event handler dan buat ref to input dalam konstruktor (tidak ada nilai yang disimpan dalam keadaan)
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
this.input = React.createRef();
}
2) Buat fungsi kirim formulir (nilai diambil dari komponen DOM)
handleSubmit(event) {
alert('A name was submitted: ' + this.input.current.value);
event.preventDefault();
}
3) Memberikan
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" ref={this.input} />
</label>
<input type="submit" value="Submit" />
</form>
Jika Anda menggunakan komponen yang tidak terkontrol , tidak perlu mengikat handleChangefungsi. Ketika formulir dikirimkan, nilainya akan diambil dari DOM dan validasi yang diperlukan dapat terjadi pada titik ini. Tidak perlu membuat fungsi handler untuk komponen input apa pun juga.
Masalah Anda
Sekarang, untuk masalah Anda:
... Saya ingin dipanggil ketika saya menekan 'Enter ketika seluruh nomor telah dimasukkan
Jika Anda ingin mencapai ini, gunakan komponen yang tidak terkontrol. Jangan membuat penangan onChange jika tidak perlu. The enterkey akan mengirimkan formulir dan handleSubmitfungsi akan dipecat.
Perubahan yang perlu Anda lakukan:
Hapus panggilan onChange di elemen Anda
var inputProcent = React.CreateElement(bootstrap.Input, {type: "text",
// bsStyle: this.validationInputFactor(),
placeholder: this.initialFactor,
className: "input-block-level",
// onChange: this.handleInput,
block: true,
addonBefore: '%',
ref:'input',
hasFeedback: true
});
Menangani formulir kirim dan validasi input Anda. Anda perlu mendapatkan nilai dari elemen Anda di fungsi kirim formulir lalu validasi. Pastikan Anda membuat referensi ke elemen Anda di konstruktor.
handleSubmit(event) {
// Get value of input field
let value = this.input.current.value;
event.preventDefault();
// Validate 'value' and submit using your own api or something
}
Contoh penggunaan komponen yang tidak terkontrol:
class NameForm extends React.Component {
constructor(props) {
super(props);
// bind submit function
this.handleSubmit = this.handleSubmit.bind(this);
// create reference to input field
this.input = React.createRef();
}
handleSubmit(event) {
// Get value of input field
let value = this.input.current.value;
console.log('value in input field: ' + value );
event.preventDefault();
// Validate 'value' and submit using your own api or something
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" ref={this.input} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
ReactDOM.render(
<NameForm />,
document.getElementById('root')
);
onBluracara.