isumix May 20 at 20:17

История одного компонента

3 min

1.8K

JavaScript*TypeScript*Website development*ReactJS*

Tutorial

Comments 13

elzvi May 20 at 21:08

Затыки начнутся, когда эти счётчики нужно будет сбросить) но вообще прикольно

isumix May 20 at 21:57

Спасибо! Внутри компонента можно сбросить простым обнулением переменной либо "lift the state up". Снвружи можно передать объект типа ref.current в который компонент передаст свой "обнулятор" при создании. Ну или как у всех, подписаться на какой-либо из реактивных стейт менеджеров на mount.

nihil-pro May 20 at 21:51

В терминах React это называется "managed input" компонент. Его попробовать можно тут в альтернативном стиле (не JSX).

В вашем инпуте каретка скачет если напечатать что-то в середине текста.

isumix May 20 at 22:01

Да, есть такое, для наглядности этот компонент очень простой, в Реакт будет такое же поведение.

nihil-pro May 20 at 22:20

Нет, в реакте такого поведения не будет.

isumix May 20 at 22:53

Вы уверены? Это стандартное поведение элемента <input /> при присвоении input.value = x.

nihil-pro May 21 at 08:39

Вы уверены?

Разумеется.

isumix May 21 at 09:22

А что же вы опустили toUpperCase? С ним как раз будет точно такое же поведение.

Кстати странно, я думал что это по причине присвоения, а тут что-то другое, также цифры работают корректно, надо будет покопаться.

green_fenix May 21 at 20:54

Если я правильно понимаю, скачет когда .value дом элемента инпута меняется на не идентичную текущей строку программно.

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

Но если любым программным способом присвоить другое значение, позиция каретки сбрасывается - контекст действий юзера над инпутом потерялся.

isumix May 21 at 21:32

Да, видимо так и работает. Возможно если сохранять позицию курсора и восстанавливать ее после присвоения, то проблема решится.

nin-jin May 22 at 23:19

Именно так и работает $mol_string, но ни в коем случае не подглядывайте в $mol, продолжайте набивать шишки.

isumix May 23 at 09:44

Философия Фьзора - не трогать дефолтное поведение. Лучше один раз изучить стандарт (W3C), чем для каждого фреймворка запоминать отличия.

green_fenix May 20 at 21:53

Ждем nin-jin с комментарием про то что $mol лучше