Подскажите, как из functional-компонента, внутри которого есть элемент input type="text", передать DOM-ссылку на этот инпут в родительский functional-компонент?

А зачем вам такие манипуляции?

А зачем вам такие манипуляции?

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

Насколько я знаю, эти вещи можно через стили менять.

а это идея, спасибо!

Подскажите, как из functional-компонента, внутри которого есть элемент input type="text", передать DOM-ссылку на этот инпут в родительский functional-компонент?

Через HOC? Render prop. Прокинуть пропсы родителю высшего порядка

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

Можно значение поля через стейт получать. Только стейт нужно будет в родителе держать.

Или же некрасивым и топорным методом, установив id у input'а ребёнка.

Я уверен что есть другие способы это сделать, тут насколько фантазии хватит.

Подпишись на событие какое то

А как в реакте на события подписываться? Кроме стандартных onclick. Разве вариант как то отследить что новый игрок зашёл?

Во, https://reactjs.org/docs/forwarding-refs.html

А как в реакте на события подписываться? Кроме стандартных onclick. Разве вариант как то отследить что новый игрок зашёл?

Нужен код, на словах ничего непонятно

Нужен код, на словах ничего непонятно

Та другой чел спрашивал. Мне просто интересно

А зачем использовать для этого html евенты, есть куча способов как можно следить за состоянием приложения

А как в реакте на события подписываться? Кроме стандартных onclick. Разве вариант как то отследить что новый игрок зашёл?

Свои сделать можно, типо зашёл ли юзер, 4сли зашёл, что то сделать, вышел, что то сделать

А зачем использовать для этого html евенты, есть куча способов как можно следить за состоянием приложения

Ну да я затупил видимо. Думал мб есть какие то слушатели не DOM событий

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

Лучше не работать с ref-ами на input элементы, а использовать их в controlled режиме. То есть хранить их состояние вне DOM и синхронизировать по onChange

Лучше не работать с ref-ами на input элементы, а использовать их в controlled режиме. То есть хранить их состояние вне DOM и синхронизировать по onChange

+

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

Максимально кривое решение

Лучше не работать с ref-ами на input элементы, а использовать их в controlled режиме. То есть хранить их состояние вне DOM и синхронизировать по onChange

Стейт всегда лучше императивного подхода

Стейт всегда лучше императивного подхода

Тут дело не в этом, короче вот статья из оф доки чтобы понять о чем речь https://ru.reactjs.org/docs/forms.html#controlled-components

Стейт всегда лучше императивного подхода

что значит императивный подход?

что значит императивный подход?

Предположу что имелась ввиду прямая работа с DOM. React в большинстве случаев позволяет абстрагироваться от DOMа и это хорошо. Refы нужны зачастую для работы с императивными dom api (типа тегов audio video canvas). Если есть возможность обойтись без их использования, то это верный вариант.

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

DOM-элемент формы имеет доступ к данным всех инпутов через form.elements, как бы глубоко они не седели. Для простых форм можно обойтись неконтролируемыми инпутами и отправлять при сабмите напрямую FormData.

Предположу что имелась ввиду прямая работа с DOM. React в большинстве случаев позволяет абстрагироваться от DOMа и это хорошо. Refы нужны зачастую для работы с императивными dom api (типа тегов audio video canvas). Если есть возможность обойтись без их использования, то это верный вариант.

спасибо

Всем привет. Я понимаю что реакт иммутабельный но мне просто интересно. Если писать логику в жихненных циклах то есть! componentWillUpdate(){ this.count ++ } render(){ return (<p>{this,count}</p>)}

Всем привет. Я понимаю что реакт иммутабельный но мне просто интересно. Если писать логику в жихненных циклах то есть! componentWillUpdate(){ this.count ++ } render(){ return (<p>{this,count}</p>)}

)))

Всем привет. Я понимаю что реакт иммутабельный но мне просто интересно. Если писать логику в жихненных циклах то есть! componentWillUpdate(){ this.count ++ } render(){ return (<p>{this,count}</p>)}

Это нормально такой стиль?

Всем привет. Я понимаю что реакт иммутабельный но мне просто интересно. Если писать логику в жихненных циклах то есть! componentWillUpdate(){ this.count ++ } render(){ return (<p>{this,count}</p>)}

Нет конечно, это извращение, причём не понятно зачем, если вам реакт даёт инструменты типа setState которые обеспечивают синхронизацию состояния и представления. Зачем... зачем такие извраты.

Это нормально такой стиль?

Это ненормально даже для эксперимента. Это непонимание работы реакта, как думаете что будет если вы сделаете this.count++ ? Ничего не будет, реакт не узнает что нужно перерендерить компонент , вы не увидите изменение состояния вашего счетчика. Я уже молчу что нет такого метода componentWillUpdate, больше нет...

Это ненормально даже для эксперимента. Это непонимание работы реакта, как думаете что будет если вы сделаете this.count++ ? Ничего не будет, реакт не узнает что нужно перерендерить компонент , вы не увидите изменение состояния вашего счетчика. Я уже молчу что нет такого метода componentWillUpdate, больше нет...

Ну я просто изменю свойства класса а события я буду просто оборачивать в this.forceUpdate()

Ну я просто изменю свойства класса а события я буду просто оборачивать в this.forceUpdate()

Ну ок, такое будет работать, но зачем вам реакт?

Ну я просто изменю свойства класса а события я буду просто оборачивать в this.forceUpdate()

зачем? если тебе надо поработать “за кулисами”, используй свойства класса, а результат загоняй в стейт и всё сделают за тебя. Зачем лишние телодвижения?

Ну я вот я ихотел чтобы не искать стороние бибилотеки типо редакса и mobx Реакт разве придумали с их использованием ? А если один использоавать. Я в свое время написал рисовалку на канвас плюс реакт где вся логика рисавание была в componeWilltUpdate а рисование само в cDU. Зачем тогда это жизненные циклы придумали willUpdate например?

Найс забайтил

Ну я вот я ихотел чтобы не искать стороние бибилотеки типо редакса и mobx Реакт разве придумали с их использованием ? А если один использоавать. Я в свое время написал рисовалку на канвас плюс реакт где вся логика рисавание была в componeWilltUpdate а рисование само в cDU. Зачем тогда это жизненные циклы придумали willUpdate например?

Затем, чтобы ререндер производил фреймворк/библиотека Не вы дергаете, а он делает это за вас

Привет всем ,подскажите такой вопрос использую agGrid в качестве таблицы и там есть server side модель данных. Собственно там есть колбек по которому нужно типо данные запросить. Но у меня в приложении по стандарту Redux + Saga. Соответственно для того чтобы получить список я кидаю ивент через диспатч и потом уже когда там данные загрузились я через пропертис могу их получить. Все как обычно. но тут немного по-другому, мне по сути нужно подписаться на изменение данные, можно ли это как-то сделать? или просто вызывать сервис без редакса в контейнере?

Инверсия управления

Как перебирать?

Попробуй использовать ramda или lodash, весят не много. А код js сокращают в разы, плюс есть проверки

Попробуй использовать ramda или lodash, весят не много. А код js сокращают в разы, плюс есть проверки

нормально они весят, а не немного

нормально они весят, а не немного

Ну ты импортируй в компоненты только то что используешь, а не всё

Мамкины хакеры

нормально они весят, а не немного

Рамда немного и тришейкинг, так что ничего страшного

Интереса ради, кто-нибудь использует функциональные библиотеки типа рамда в хардкор режиме? Тобишь с композицией, currying и прочими функциональными прелестями.

да, офк удобно разруливать мудренные структуры данных

Интереса ради, кто-нибудь использует функциональные библиотеки типа рамда в хардкор режиме? Тобишь с композицией, currying и прочими функциональными прелестями.

Я пробовал. Но чаще всего код становится только сложнее

и с тсом плохо дружит

и с тсом плохо дружит

С флоу норм

Особенно когда в pipe много чего собирается? 🙂

там есть аналог рамды типа rameda (вроде) там все ок с тайпингами

Ванилла ФП для хардкорщиков 😁

ну можешь скопипасть компоуз, каринг со стаковерфлоу и хуярить, да

ну можешь скопипасть компоуз, каринг со стаковерфлоу и хуярить, да

😁👍

приветы! первый день юзаю реакт и не понимаю, неужели мне придется юзать: this.method = this.method.bind(this); чтобы использовать this.setState в методе?

либо method = () => {?

либо method = () => {?

Это. А можно вообще классы не писать

Ещё и код проще будет

Это. А можно вообще классы не писать

а если я классный?

Привет! Вопрос по Реакт: есть функция: const showInfo = () => { setInfo(aboutComp); setList([]); }; setInfo и setList - это обновления стейтов компонента (это хуки useState). Мне нужно, чтоб эти функции выполнились по порядку. Но, как я понимаю, обновление стейта - это асинхронные функции и они могут выполниться и не по очереди. Если писать на классах, то можно бы было setList засунуть в колбэк у setState. Но на хуках пишут, что так нельзя. Думаю, что тут нужны Промисы. Или как-то можно по другому?

приветы! первый день юзаю реакт и не понимаю, неужели мне придется юзать: this.method = this.method.bind(this); чтобы использовать this.setState в методе?

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

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

в терминоголии мне не ясно что такое лямбда-выражения к сожалению

либо method = () => {?

Вот это самое

тогда все ясно, использовать классы было ошибкой на старте, появляются сложности спасибо

что обычно берете для карусели? react-slick?

привет, ребят. как можно решить проблему ввода текста в ипнут на японском. По дефолту первая буква в инпутах делается большой. У меня получается, что при вводе текста при вкюченой японской расскладке всегда первая буква становится большой и она остается, при введении следующего символа он преобразовывается в иегроглиф, но первая буква остается. Правильно должно в инпуте отображаться так: Tanaka → たなか А у меня получается, что текст отображается так: Tanaka → Ｔあなか Что можно сделать? Подскажите пожалуйста

тогда все ясно, использовать классы было ошибкой на старте, появляются сложности спасибо

в классах можно использовать class-level properties. оно еще не в стандарте (stage 3), но нода 12 уже умеет, хром 72+, значит вероятней всего скоро будет stage 4 class Someclass extends React.Component { onClick = () => { this.setState() } }

все через бабел же пропускается

все через бабел же пропускается

Одно дело нативно. Другое результат трансриляции в теже бинды

все через бабел же пропускается

это понятно, просто не все любят использовать вещи, которые еще не в стандарте

Добрый вечер. Играю с MobX, и не могу понять как дебажить это дело. Например вывожу в консоль поле помеченное как @observable и не могу посмотреть значение того что лежит в этом поле. Как это посмотреть?

Добрый вечер. Играю с MobX, и не могу понять как дебажить это дело. Например вывожу в консоль поле помеченное как @observable и не могу посмотреть значение того что лежит в этом поле. Как это посмотреть?

toJS()

toJS()

А есть какая нибудь тулза для удобного дебага мобикс?

А есть какая нибудь тулза для удобного дебага мобикс?

MobX dev tools

Зарезольв его

Это обзервебл, тебе нужно Некст функцию вроде как вызвать

next у Прокси ? вы че куурите ?

Тогда сори, не шарю в мобх

Тогда сори, не шарю в мобх

Тогда не надо советы раздовать если не «шаришь»

Тогда не надо советы раздовать если не «шаришь»

Он же написал, поле помечено как обзервебл

Окей, не советую