Metoda onChange dla pola input nie zostanie wywołana w przypadku, gdy tekst w polu zostanie zaznaczony i usunięty, ponieważ w takim przypadku wartość pola input faktycznie się nie zmieniła.
Wartością pola input jest wciąż pusty ciąg znaków, ale w interfejsie użytkownika zobaczymy brak tekstu w polu. Jeśli pole input zawierało tekst i został on zaznaczony, a następnie usunięty, pole input faktycznie przeszło z wartości niepustej na pustą, ale nie nastąpiła zmiana wartości w czasie rzeczywistym, co spowodowałoby wywołanie metody onChange.
Można jednak użyć innych metod obsługi zdarzeń, takich jak onInput lub onKeyUp, aby zareagować na usunięcie zaznaczonego tekstu z pola input.
Metoda onInput jest wywoływana za każdym razem, gdy wartość pola input ulega zmianie, niezależnie od tego, jakie czynności użytkownik wykonuje na polu input. Metoda onKeyUp natomiast jest wywoływana, gdy użytkownik zwolni klawisz na klawiaturze po wpisaniu lub usunięciu znaku z pola input.
W przypadku metody onInput lub onKeyUp, zmiana wartości pola input zostanie wykryta i metoda obsługi zdarzeń zostanie wywołana, nawet jeśli tekst został zaznaczony i usunięty.
Przykładowy kod z użyciem metody onInput:
import React, { useState } from 'react';
function Input() {
const [value, setValue] = useState('');
const handleInput = (event) => {
if (event.target.value === '') {
// pole input zostało wyczyszczone
console.log('Pole input zostało wyczyszczone!');
}
setValue(event.target.value);
};
return (
<input type="text" value={value} onInput={handleInput} />
);
}
Alternatywnie, można również użyć metody onKeyUp, która jest wywoływana, gdy użytkownik zwolni klawisz na klawiaturze, po wpisaniu lub usunięciu znaku z pola input.
Przykładowy kod z użyciem metody onKeyUp:
import React, { useState } from 'react';
function Input() {
const [value, setValue] = useState('');
const handleKeyUp = (event) => {
if (event.target.value === '') {
// pole input zostało wyczyszczone
console.log('Pole input zostało wyczyszczone!');
}
setValue(event.target.value);
};
return (
<input type="text" value={value} onKeyUp={handleKeyUp} />
);
}
W obu przypadkach, handleChange zostanie wywołana, gdy pole input zostanie wyczyszczone.