реакция: как установить фокус с помощью обработчика щелчка

В моей форме на основе редукции есть кнопка, которая должна сбросить форму и переместить фокус обратно в первое поле ввода.
Сброс содержимого происходит прямо вверх, но у меня проблемы с фокусом.реакция: как установить фокус с помощью обработчика щелчка

autoFocus на первом поле работает только при первоначальном рендере. Есть ли разумный способ его повторного запуска?

Если мне нужно пойти с явным элементом element.focus(), с чего я должен его вызвать? Я использую реакции-редукты, но не редукционные формы.

источник

2016-04-12 Joachim Lous

Вы сохраняете какую-либо информацию в магазине, чтобы узнать, какой элемент должен фокусироваться на загрузке страницы? Неа? Тогда почему вы должны это сделать позже?

Trigger element.focus() сразу после отправки - вам не нужен Redux для достижения этого, или Redux для хранения этого состояния.

псевдокод может выглядеть следующим образом

onReset() { 
    const action = { 
    type: RESET_FORM, 
    } 
    dispatch(action); 

    const element = getElement(); // propably read ref? Find element with [autoFocus] attribute in component? 
    element.focus(); 
}

источник

2016-04-12 13:56:01 Andreyco

Мой оригинальный мо тивизация заключалась в том, чтобы ограничить классы представления чистым, немым кодом рендеринга, без кода изменения поведения/состояния и быть в состоянии проверить всю логику состояния независимо от рендеринга. Отличие от обработки фокусов по умолчанию (которая не проходит через состояние моего приложения) заключается в том, что теперь я явно манипулировал моим кодом. Но вы можете быть правы, что для этой конкретной проблемы лучше использовать более прагматичный подход, и перемещение всего фокусного контроля в приложение-код нереально или желательно. –

вы можете использовать:

document.getElementById("ElementName").focus();

окончательный код здесь:

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta charset="UTF-8"> 
 

 
<script> 
 
function change() { 
 
    document.getElementById("two").focus(); 
 
} 
 
</script> 
 
</head> 
 

 

 

 
<body> 
 
    <input type="radio" name="name" id="name" onchange="change()" /> 
 

 
    <input type="text" name="one" id="one" /> 
 
    <input type="text" name="two" id="two" /> 
 
</body> 
 
</html>

источник

2016-04-12 14:05:25 aghilpro

Как указано в вопросе, я знаю об element.focus(). Мой интерес был там, где (или если) он вписывается в реакцию/редукцию. Вызов его из ввода.onChange определенно не соответствует описанной проблеме. –

в порядке. я понял. – aghilpro

реакция: как установить фокус с помощью обработчика щелчка

ответ

Смежные вопросы