Потерял фокус при вводе, когда щелкнул значок, чтобы очистить его

#javascript #css #reactjs #jsx

Вопрос:

Я пытаюсь реализовать очистку ввода, нажав на значок. JSX-это

 <div><input type="text" value={someValueFromState}/><SomeIconComponent onClick={()=> clearInput()}/></div>
 

Значок по умолчанию скрыт и отображается при фокусировке ввода. Однако в момент нажатия на значок ввод теряет фокус, и значок снова становится скрытым, что делает click невозможным событие регистрации. Есть ли какой-нибудь обходной путь ?

Комментарии:

1. Я думаю, что запрет по умолчанию при нажатии на значок должен предотвратить потерю фокуса

2. переключатель фокусировки на значке. вы должны назвать свои входные данные и в своей бизнес-логике, чтобы очистить содержимое, вернуть фокус на входные данные

3. Невозможно сосредоточиться на вводе и щелкнуть по значку. Значок фокусируется на мыши вниз, в то время как событие щелчка запускается при наведении мыши вверх. «Обходным путем», или, скорее, взломом, была бы задержка перед скрытием значка, когда ввод теряет фокус, что позволит вам щелкнуть по нему до того, как он исчезнет.

4. вы имеете в виду показывать значок не с помощью псевдокласса css :focus, а с помощью javascript onFocus ?