В React есть несколько методов, которые можно использовать, чтобы текст-заполнитель исчезал, когда пользователь нажимает на поле ввода. Вот несколько подходов, которые вы можете рассмотреть:
-
Управляемый компонент: вы можете создать управляемый компонент, в котором входное значение сохраняется в состоянии компонента. Проверив значение состояния, вы можете условно отобразить текст-заполнитель. Когда пользователь нажимает на поле ввода, вы можете обновить его состояние и удалить текст-заполнитель.
-
Событие onFocus: вы можете использовать обработчик событий
onFocus, предоставляемый React, чтобы определить, когда поле ввода получает фокус. Внутри обработчика событий вы можете обновить состояние компонента или изменить элемент ввода, удалив текст-заполнитель. -
Условный рендеринг. Другой подход заключается в условном рендеринге входного элемента на основе переменной состояния. Первоначально вы можете визуализировать элемент ввода без текста-заполнителя. Когда пользователь взаимодействует с полем ввода, вы можете обновить состояние и отобразить элемент ввода с удаленным текстом-заполнителем.