Buna bir cevap bulmak için etrafta arama yapmayı denedim, ancak bunların çoğu, onChangebulanıklığın ardından tetikleyicilerin olduğu React bağlamının dışında .
Çeşitli testler yaparken, bu iki olayın nasıl farklı olduğunu (bir metin alanına uygulandığında) söyleyemiyorum. Birisi buna ışık tutabilir mi?
onChange) biraz farklı davranır . Ve hayır, metni bir metin alanına yapıştırmak (React'te) hem onChangeve hem de onInput. Bir kemanla test etmekten çekinmeyin ve göreceksiniz.
onChangetetikleyeceğini ve onInputolmayacağını, ancak her ikisinin de tetikleyeceğini düşündüm .
Yanıtlar:
React, bazı nedenlerden dolayı, Component.onChangeDOM element.oninputolayına dinleyiciler ekler . Formlarla ilgili dokümanlardaki nota bakın:
Bu davranışa şaşıran daha fazla insan var. Daha fazla ayrıntı için, React sorun izleyicisindeki bu konuya bakın:
React'in onChange ile onInput # 3964 arasındaki ilişkiyi belgeleyin
Bu konudaki yorumlardan alıntı yapın:
React'in neden onChange'in onInput gibi davranmasını seçtiğini anlamıyorum. Anladığım kadarıyla, eski onChange davranışını geri almanın bir yolu yok. Dokümanlar bunun bir "yanlış isim" olduğunu iddia ediyor, ancak bu gerçekten değil, bir değişiklik olduğunda, giriş de odağı yitirene kadar ateşleniyor.
Doğrulama için, bazen yazmayı bitirene kadar doğrulama hatalarını göstermek istemeyiz. Ya da belki her tuş vuruşunda yeniden render istemiyoruz. Şimdi bunu yapmanın tek yolu onBlur'dur, ancak şimdi değerin manuel olarak değiştiğini de kontrol etmemiz gerekiyor.
O kadar da önemli değil, ama bana öyle geliyor ki React yararlı bir olayı bir kenara attı ve zaten bunu yapan bir olay varken standart davranıştan saptı.
Yoruma% 100 katılıyorum ... Ama şimdi değiştirmenin çözdüğünden daha fazla sorun getireceğini tahmin ediyorum çünkü zaten bu davranışa dayanan çok fazla kod yazılmıştı.
React, resmi Web API koleksiyonunun bir parçası değildir
React, JS'nin üzerine inşa edilmiş ve büyük bir benimsenme oranı görmüş olsa da, çok sayıda işlevi kendi (oldukça küçük) API'si altında gizleyen bir React teknolojisi var. Bunun bariz olduğu alan olay sistemindedir, yüzey altında aslında standart DOM olay sisteminden radikal bir şekilde farklı olan çok şey vardır. Yalnızca hangi olayların ne yaptığı açısından değil, aynı zamanda verilerin olay işlemenin hangi aşamasında kalmasına izin verildiği açısından da. Buradan daha fazlasını okuyabilirsiniz:
Hiçbir fark yok
React, varsayılan 'onChange' olayının davranışına sahip değildir. React'te gördüğümüz 'onChange', varsayılan 'onInput' olayının davranışına sahiptir. Yani sorunuza cevap vermek için ikisinin de tepki olarak hiçbir farkı yok. GitHub'da bununla ilgili bir sorun ortaya attım ve bu konuda söyleyecekleri şey bu:
Sanırım bu kararın verildiği sırada (~ 4 yıl önce mi?), OnInput tarayıcılar arasında tutarlı bir şekilde çalışmıyordu ve "değişiklik" olayının "değişiklik" olayının her değişiklikte ateş. React durumunda bu daha büyük bir sorundur, çünkü değişikliği yeterince erken halledemezseniz, kontrollü girdiler asla güncellenmez ve insanları React'in bozuk olduğunu düşünmeye sevk eder. Bu yüzden ekip, bunu Değiştir olarak adlandırmaya başladı.
Geriye dönüp bakıldığında, başka bir olayın davranışını değiştirmek yerine onInput üzerinde çoklu doldurma yapmak ve adını korumak daha iyi bir fikir olabilirdi. Ama o gemi uzun zaman önce yelken açtı. Gelecekte bu kararı tekrar gözden geçirebiliriz, ancak bunu bir React DOM tuhaflığı olarak görmenizi tavsiye ederim (ki buna çok çabuk alışacaksınız).
https://github.com/facebook/react/issues/9567
Ayrıca bu makale daha fazla bilgi sağlayacaktır. Varsayılan "onChange" seçeneğinin eksik olması için bir çözüm olarak makale, "onBlur" olayını dinlemeyi önerir.
Son zamanlarda onChangeIE11'deki giriş alanına kopyalayıp yapıştırmaya izin vermeyen bir hata aldım . Oysa onInputolay bu davranışa izin verirdi. Belgelerde bunu açıklayacak herhangi bir belge bulamadım, ancak bu ikisi arasında (beklenen veya beklenmeyen) bir fark olduğunu gösteriyor.
Burada çeşitli yorumlarda görebileceğiniz gibi, React, bu kararın esaslarını tartışmak yerine onChange ve onInput ile aynı şekilde davranır. İşte çözüm.
Kullanıcının düzenlemelerini tamamlanana kadar işlemek istemediğinizde onBlur kullanın. :)
Gerçek, DOM tabanlı changeolayı dinlemenin bir yolunu arayan bu sorunu tökezleyen herkes için, bunu böyle yaptım (TypeScript ile yazılmıştır):
import { Component, createElement, InputHTMLAttributes } from 'react';
export interface CustomInputProps {
onChange?: (event: Event) => void;
onInput?: (event: Event) => void;
}
/**
* This component restores the 'onChange' and 'onInput' behavior of JavaScript.
*
* See:
* - https://reactjs.org/docs/dom-elements.html#onchange
* - https://github.com/facebook/react/issues/3964
* - https://github.com/facebook/react/issues/9657
* - https://github.com/facebook/react/issues/14857
*/
export class CustomInput extends Component<Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'onInput' | 'ref'> & CustomInputProps> {
private readonly registerCallbacks = (element: HTMLInputElement | null) => {
if (element) {
element.onchange = this.props.onChange ? this.props.onChange : null;
element.oninput = this.props.onInput ? this.props.onInput : null;
}
};
public render() {
return <input ref={this.registerCallbacks} {...this.props} onChange={undefined} onInput={undefined} />;
}
}
Bu yaklaşımı iyileştirmenin yollarını görürseniz veya onunla ilgili sorunlarla karşılaşırsanız lütfen bana bildirin. Aksine blur,change olay ayrıca kullanıcı enter tuşuna bastığında tetiklenir ve yalnızca değer gerçekten değiştiğinde tetiklenir.
Hala bu CustomInputbileşenle deneyim kazanıyorum . Örneğin, onay kutuları garip davranır. Ben de invert zorunda event.target.checkediçinde onChangeolan onay kutusunun değer geçerken işleyici checkedveya onay kutusunun değer geçerken bu inversiyon kurtulmak defaultCheckedama bu daha sonra sonları o senkronize sayfa keep üzerinde farklı yerlerde aynı devleti temsil eden birkaç onay kutularını . (Her iki durumda da, for onay kutularına bir onInputişleyici göndermedim CustomInput.)
Bir fark onChange, aynı karaktere sahip bir karakteri seçip değiştirirken ateşlenmemiş gibi görünüyor.onInput .
Bu korumalı alana bakın: https://codesandbox.io/s/react-onchange-vs-oninput-coggf?file=/src/App.js
onChangeve 2 olmak üzere 4 olay tetikleyecektir onInput.onInputolayı tetikleyene kadar , ancak hayır onChange.