Kullanıcılara tepki verin, işte tamlık için bir cevap.
Reaksiyon sürümü 16.4.2
Her tuş vuruşu için güncelleme yapmak veya değeri yalnızca gönderim sırasında almak istersiniz. Bileşen çalışmalarına önemli olayların eklenmesi, ancak resmi dokümanlarda önerilen alternatifler var.
Kontrollü ve Kontrolsüz bileşenler
Kontrollü
Gönderen Dokümanlar - Formlar ve Kontrollü bileşenler :
HTML'de input, textarea ve select gibi form öğeleri genellikle kendi durumlarını korur ve bunu kullanıcı girdisine göre günceller. React'te, değiştirilebilir durum genellikle bileşenlerin state özelliğinde tutulur ve yalnızca setState () ile güncellenir.
Tepki durumunu “tek hakikat kaynağı” haline getirerek bu ikisini birleştirebiliriz. Ardından, bir formu oluşturan React bileşeni, sonraki kullanıcı girdisinde bu formda neler olduğunu da denetler. Değeri React tarafından bu şekilde kontrol edilen bir girdi form öğesine “kontrollü bileşen” denir.
Kontrollü bir bileşen kullanıyorsanız, değerdeki her değişiklik için durumu güncel tutmanız gerekir. Bunun olması için, bileşene bir olay işleyicisi bağlarsınız. Dokümanların örneklerinde genellikle onChange olayı.
Misal:
1) Yapıcıdaki olay işleyiciyi bağlama (değer devlette tutulur)
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
}
2) İşleyici işlevi oluşturma
handleChange(event) {
this.setState({value: event.target.value});
}
3) Form gönderme işlevi oluşturma (değer durumdan alınır)
handleSubmit(event) {
alert('A name was submitted: ' + this.state.value);
event.preventDefault();
}
4) Oluştur
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" value={this.state.value} onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
Kontrollü bileşenler kullanırsanız handleChange, uygun durumu güncellemek ve korumak için işleviniz her zaman tetiklenir. Eyalet her zaman güncellenmiş değere sahip olacak ve form gönderildiğinde, değer eyaletten alınacaktır. Formunuz çok uzunsa bu bir con olabilir, çünkü her bileşen için bir işlev oluşturmanız veya her bileşenin değer değişikliğini işleyen basit bir işlev yazmanız gerekir.
kontrolsüz
Gönderen Dokümanlar - Kontrolsüz bileşeni
Çoğu durumda, formları uygulamak için kontrollü bileşenler kullanmanızı öneririz. Kontrollü bir bileşende, form verileri bir React bileşeni tarafından işlenir. Alternatif, form verilerinin DOM tarafından ele alındığı kontrolsüz bileşenlerdir.
Her durum güncelleştirmesi için bir olay işleyicisi yazmak yerine denetlenmeyen bir bileşen yazmak için DOM'dan form değerleri almak için bir ref kullanabilirsiniz.
Buradaki temel fark, onChangefonksiyonu kullanmak değil onSubmit, değerleri almak ve gerekliyse doğrulamak için formun kullanılmasıdır.
Misal:
1) Olay işleyiciyi bağlayın ve yapıcıya giriş yapmak için ref oluşturun (hiçbir değer durumda tutulmaz)
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
this.input = React.createRef();
}
2) Form gönderme işlevi oluşturma (değer DOM bileşeninden alınır)
handleSubmit(event) {
alert('A name was submitted: ' + this.input.current.value);
event.preventDefault();
}
3) Oluştur
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" ref={this.input} />
</label>
<input type="submit" value="Submit" />
</form>
Kontrolsüz bileşenler kullanırsanız , bir handleChangeişlevi bağlamanız gerekmez . Form gönderildiğinde, değer DOM'den alınır ve gerekli doğrulamalar bu noktada gerçekleşebilir. Herhangi bir giriş bileşeni için herhangi bir işleyici işlevi oluşturmaya gerek yoktur.
Sorununuz
Şimdi, sorununuz için:
... 'Tüm numara girildiğinde Enter' tuşuna bastığımda çağrılmasını istiyorum
Bunu başarmak istiyorsanız kontrolsüz bir bileşen kullanın. Gerekli değilse onChange işleyicilerini oluşturmayın. enterAnahtar formu göndermek ve handleSubmitfonksiyon kovulacak.
Yapmanız gereken değişiklikler:
Öğenizdeki onChange çağrısını kaldırın
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
});
Formu gönderin ve girişinizi doğrulayın. Değeri form gönderme işlevinde öğenizden almanız ve sonra doğrulamanız gerekir. Yapıcıda öğenize referans oluşturduğunuzdan emin olun.
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
}
Kontrolsüz bir bileşenin kullanımına örnek:
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')
);
onBlurolaya bağlamak istersiniz .