Коллбеком

Каким?

в общем передает правильно, а читает неверно

спасибо!

Каким?

Произошёл троллинг, извините

Коллбеком

Вот что пробовал 1) В хендлере onSubmit в конце сделал form.reset() - написало что так нельзя делать, юзай setTimeout(form.reset) 2) В хендлере onSubmit в конце сделал setTimeout(form.reset) - написало что так нельзя делать, юзай setTimeout(form.reset) 3) Сделал как в ишью из гитхаба - onSubmit={(event) => { handleSubmit(event).then(form.reset) }} Но так как у меня при ошибке валидации в handleSubmit происходит return, возвращается undefined и в результате cannot read 'then' of undefined Думаю сработает если сделать onSubmit async Но это все какими-то костылями выглядит

Вот в примерах все радужно, а на практике нифига подобного

Не, с async колбеком не прокатило, короче беру formik обратно Еще и селекты чет сегодня разочаровали, короче у меня есть в них изначальный option типа "Выберите значение", value там - пустая строка Так вот, этот option нифига не работает, и при его выборе значение в values становится не пустой строкой, а оно просто исчезает оттуда полностью, и в итоге вместо обычного for in для валидации всех полей пришлось делать отдельную функцию и явно все поля ей передавать Короче сплошная боль

Вот что пробовал 1) В хендлере onSubmit в конце сделал form.reset() - написало что так нельзя делать, юзай setTimeout(form.reset) 2) В хендлере onSubmit в конце сделал setTimeout(form.reset) - написало что так нельзя делать, юзай setTimeout(form.reset) 3) Сделал как в ишью из гитхаба - onSubmit={(event) => { handleSubmit(event).then(form.reset) }} Но так как у меня при ошибке валидации в handleSubmit происходит return, возвращается undefined и в результате cannot read 'then' of undefined Думаю сработает если сделать onSubmit async Но это все какими-то костылями выглядит

И да, еще в final-form ошибки разделяются на submit и обычные Я очень очень долго не мог понять почему я ошибки внутри onSubmit выставляю через колбек, а в рендерах Field все чистенько Оказалось что надо искать их в submitError Может конечно мой косяк и я не дочитал просто об этом

Не, с async колбеком не прокатило, короче беру formik обратно Еще и селекты чет сегодня разочаровали, короче у меня есть в них изначальный option типа "Выберите значение", value там - пустая строка Так вот, этот option нифига не работает, и при его выборе значение в values становится не пустой строкой, а оно просто исчезает оттуда полностью, и в итоге вместо обычного for in для валидации всех полей пришлось делать отдельную функцию и явно все поля ей передавать Короче сплошная боль

Прочекал кстати селекты - это тоже проделки final-form

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

Если этот компонент только для рендера входящего массива, то хранить его в стейте необязательно, можно сразу пропсы рендерить. Меняются пропсы - обновляется компонент. Я так понял, фильтрация массива в родителе. Ещё инициализировать стейт из пропсов в конструкторе считается антипаттерном, не исключена возможность рассинхрона данных. Конструктор вызывается лишь один раз, когда компонент Mount, но не rerender

Если этот компонент только для рендера входящего массива, то хранить его в стейте необязательно, можно сразу пропсы рендерить. Меняются пропсы - обновляется компонент. Я так понял, фильтрация массива в родителе. Ещё инициализировать стейт из пропсов в конструкторе считается антипаттерном, не исключена возможность рассинхрона данных. Конструктор вызывается лишь один раз, когда компонент Mount, но не rerender

И можно получить ситуацию, когда в пропсах один массив, в стейте другой. По крайней мере так было

Вот что пробовал 1) В хендлере onSubmit в конце сделал form.reset() - написало что так нельзя делать, юзай setTimeout(form.reset) 2) В хендлере onSubmit в конце сделал setTimeout(form.reset) - написало что так нельзя делать, юзай setTimeout(form.reset) 3) Сделал как в ишью из гитхаба - onSubmit={(event) => { handleSubmit(event).then(form.reset) }} Но так как у меня при ошибке валидации в handleSubmit происходит return, возвращается undefined и в результате cannot read 'then' of undefined Думаю сработает если сделать onSubmit async Но это все какими-то костылями выглядит

Короче с супер простым таском final-form справляться не желает Есть форма из 4 селектов и кнопки сабмита Валидация нужна только при сабмите Валидация следующая - пройти по каждому полю и проверить что оно не пустая строка (просто проверка через каст к Boolean) Если есть хоть одна ошибка - подсветить поле (поля) с ошибками и выйти из хендлера сабмита Если нет ошибок - выполнить с полученными значениями определенное действие и сбросить форму

Короче с супер простым таском final-form справляться не желает Есть форма из 4 селектов и кнопки сабмита Валидация нужна только при сабмите Валидация следующая - пройти по каждому полю и проверить что оно не пустая строка (просто проверка через каст к Boolean) Если есть хоть одна ошибка - подсветить поле (поля) с ошибками и выйти из хендлера сабмита Если нет ошибок - выполнить с полученными значениями определенное действие и сбросить форму

Самая банальная форма, но даже с костылями reset сделать не получилось)

Короче с супер простым таском final-form справляться не желает Есть форма из 4 селектов и кнопки сабмита Валидация нужна только при сабмите Валидация следующая - пройти по каждому полю и проверить что оно не пустая строка (просто проверка через каст к Boolean) Если есть хоть одна ошибка - подсветить поле (поля) с ошибками и выйти из хендлера сабмита Если нет ошибок - выполнить с полученными значениями определенное действие и сбросить форму

Не работал с файнал формом, но это настолько базовый кейс, что 99% ты не разобрался, а не в пакете дело

Короче с супер простым таском final-form справляться не желает Есть форма из 4 селектов и кнопки сабмита Валидация нужна только при сабмите Валидация следующая - пройти по каждому полю и проверить что оно не пустая строка (просто проверка через каст к Boolean) Если есть хоть одна ошибка - подсветить поле (поля) с ошибками и выйти из хендлера сабмита Если нет ошибок - выполнить с полученными значениями определенное действие и сбросить форму

Кстати до этого оно было реализовано так - просто 4 useState и пара useCallback Меня смущало то, что handleSubmit создавался заново при каждом рендере (ну понимаете, из-за deps, в которых все значения инпутов лежат, поэтому я решил какой-нибудь форм менеджер взять) К слову, строк там было меньше (ну это можно обьяснить тем, что в форме все поля - селекты, их сложнее связывать с форм менеджерами)

Не работал с файнал формом, но это настолько базовый кейс, что 99% ты не разобрался, а не в пакете дело

Ну блин, я даже в issues залез, а до этого посмотрел 3 примера с валидациями и reset'ом

Чтобы эвенты не пересоздававший, оберни в useCallback

Чтобы эвенты не пересоздававший, оберни в useCallback

Шо?

Там и так в useCallback обернуто, просто при каждом изменении значения в инпуте содержимое deps в useCallback меняется, а значит handleSubmit заново создается, в классах можно бы было этого избежать кстати

Там и так в useCallback обернуто, просто при каждом изменении значения в инпуте содержимое deps в useCallback меняется, а значит handleSubmit заново создается, в классах можно бы было этого избежать кстати

Мне же в handleSubmit надо взять актуальные значения инпутов

Ладно, короче пока что так сойдет, это все не очень больно

Да и тут можно ... если хочется лишних ререндеров избежать, то что-то типо react-tracked + immute для создания стейта

В первом есть примеры различные

Там и так в useCallback обернуто, просто при каждом изменении значения в инпуте содержимое deps в useCallback меняется, а значит handleSubmit заново создается, в классах можно бы было этого избежать кстати

Наверное кстати дешевле вообще убрать useCallback

Люди обычно вообще колбеки в рендере плодят по 10 штук) А тут 1 всего-лишь

Лучше уж чуток память засорить до сборки, чем в каждом рендере заставлять useCallback сравнивать deps

Походу виновато мое параноидальное стремление к производительности, хотя там и так все норм работало, но это я уже сам с собой начал общаться, всем добра

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

Типа был /main/

Жму на линк который должен вести к users и если кликнуть несколько раз то выходит путь /main/users/users/users/

<NavLink to='/counter' activeStyle={{color:'red'}}>Counter</NavLink>

Как добавить класс когда я прохожу map this.props.children.map, мне на каждой итерации возвращается реакт элемент, а как клас добавить?

Как добавить класс когда я прохожу map this.props.children.map, мне на каждой итерации возвращается реакт элемент, а как клас добавить?

Как добавить класс когда я прохожу map this.props.children.map, мне на каждой итерации возвращается реакт элемент, а как клас добавить?

React.cloneElement

React.cloneElement

Что т не пойму как применить, так всё равно возвращается реакт объект

Что т не пойму как применить, так всё равно возвращается реакт объект

ну так пропы другие передай

Что т не пойму как применить, так всё равно возвращается реакт объект

{…this.props, className: “class”}

ну так пропы другие передай

Щас вижу что класс в объект добавился, а как теперь в дом структуру это вывести, с добавленными классами?

Так вывожу в render но ничего не выводится

Так вывожу в render но ничего не выводится

лол жс учи

лол жс учи

Учу

Учу

тебе нужно вернуть из функции this.props.children.map, это первое второе, зачем вообще функция? вынеси все, что в ней внутри, в render третье, не совсем понятно зачем ты создал компонент как класс, если тебе не нужен стейт или жизненные циклы

тебе нужно вернуть из функции this.props.children.map, это первое второе, зачем вообще функция? вынеси все, что в ней внутри, в render третье, не совсем понятно зачем ты создал компонент как класс, если тебе не нужен стейт или жизненные циклы

А почему бы все не писать в классах? Потому, что это 1 - стильно 2 - модно 3 - молодежно Ну и что плохого в том, что бы что-то вынести в функцию? Доебался короче, ты к парнише. А то шо он ретурн пропустил это да) Жс учить нада)

тебе нужно вернуть из функции this.props.children.map, это первое второе, зачем вообще функция? вынеси все, что в ней внутри, в render третье, не совсем понятно зачем ты создал компонент как класс, если тебе не нужен стейт или жизненные циклы

this.props.children.map - я вернул, пока я только начинаю, а вообще думаю я буду заводить стейт всётаки , а лайвсайклы пока хз нужны ли будут, я просто первый раз сам хочу попрактиковаться в создании слайдера

Как добавить класс когда я прохожу map this.props.children.map, мне на каждой итерации возвращается реакт элемент, а как клас добавить?

Может не нужно впринципе устанавливать свойства элементов не в месте их инициализации? Это не очень круто поддерживать

А почему бы все не писать в классах? Потому, что это 1 - стильно 2 - модно 3 - молодежно Ну и что плохого в том, что бы что-то вынести в функцию? Доебался короче, ты к парнише. А то шо он ретурн пропустил это да) Жс учить нада)

Классы, при наличии хуков, избыточны. Ну если только это не осознанный выбор ООП и тп

Классы, при наличии хуков, избыточны. Ну если только это не осознанный выбор ООП и тп

Я ангулярщик, извиняйте)

Жс вообще избыточный. Бауэр, нпм, йарн. 3 вебпака. Тайпскрипт. Новый фреймворк раз в 2 недели. Шо впадло выучить синтаксис классов?

Я ангулярщик, извиняйте)

там потом заместо функций что нить новое придумают, а старое начнут хейтить, классика)

Жс вообще избыточный. Бауэр, нпм, йарн. 3 вебпака. Тайпскрипт. Новый фреймворк раз в 2 недели. Шо впадло выучить синтаксис классов?

Да, но зачем?

Проблема в том что классы не деприкейтед реакт-тимой, как бы, но уже деприкейтед всей(!) экосистемой

Проблема в том что классы не деприкейтед реакт-тимой, как бы, но уже деприкейтед всей(!) экосистемой

Они ведь идут к этому

А почему бы все не писать в классах? Потому, что это 1 - стильно 2 - модно 3 - молодежно Ну и что плохого в том, что бы что-то вынести в функцию? Доебался короче, ты к парнише. А то шо он ретурн пропустил это да) Жс учить нада)

в рот брать что попало сейчас тоже стильно, модно и молодежно, так что вообще не аргумент

Проблема в том что классы не деприкейтед реакт-тимой, как бы, но уже деприкейтед всей(!) экосистемой

Даже вью там выбросил в помойку Class API в 3 версии

А хочет ввести хук апи 🤷‍♂

Проблема в том что классы не деприкейтед реакт-тимой, как бы, но уже деприкейтед всей(!) экосистемой

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

А хочет ввести хук апи 🤷‍♂

интересно, зачем вую хуки

Даже вью там выбросил в помойку Class API в 3 версии

Выбросил в помойку еще на стадии rfc

Выбросил в помойку еще на стадии rfc

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

Что т не пойму React.cloneElement метод у реакта.. Почему возвращается вместо 1 - 111111, 2 - 22222 и тд?

Что т не пойму React.cloneElement метод у реакта.. Почему возвращается вместо 1 - 111111, 2 - 22222 и тд?

Вы пропсы какие вкладываете в cloneElement?

И повторюсь, крайне не рекомендую использовать cloneElement

Я хочу всем детям тоесть слайдам, проставить класс свой

И повторюсь, крайне не рекомендую использовать cloneElement

А какой в замен cloneElement?

Я хочу всем детям тоесть слайдам, проставить класс свой

В чем проблема здесь задать им классы?

В чем проблема здесь задать им классы?

Да ни в чем, просто я хотелось что бы сразу автоматом проставились классы

Да ни в чем, просто я хотелось что бы сразу автоматом проставились классы

это оверинжинеринг ты, видимо, не верстал никогда сайты, раз не хочешь так делать)

это оверинжинеринг ты, видимо, не верстал никогда сайты, раз не хочешь так делать)

Верстал канеш)

Приветульки, мне нужно чтобы при нажатии на ссылку (при вызове компоненты) появлялась полностью новая страница, как это можно сделать и чтобы не считалось за костыли?

Что значит полностью новая ?

Приветульки, мне нужно чтобы при нажатии на ссылку (при вызове компоненты) появлялась полностью новая страница, как это можно сделать и чтобы не считалось за костыли?

тебе нужно роутинг в приложение добавить

Что значит полностью новая ?

Не похожая на старую.

🤔

Приветульки, мне нужно чтобы при нажатии на ссылку (при вызове компоненты) появлялась полностью новая страница, как это можно сделать и чтобы не считалось за костыли?

чтобы url в браузере менялся ?

Новый контент.

URL у меня меняется, контент тоже меняется на странице в зависимости от URL`a, но эти ссылки остаются после нажатия на них, а мне нужно чтобы пропадал этот блок с ними и поверх уже выводился новый контент

будет правильно присваивать им display: none или как?

ничего не понял. опиши нормально требования, опиши то, что есть на данный момент и какой подход используешь, сбрось пример кода (было бы идеально). здесь не ванги, так тебе точно никто не поможет

function App() { return ( <div className="App"> <Route path='/test1' component={Test1} /> <Route path='/test2' component={Test2} /> <Route path='/test3' component={Test3} /> <div className="intro"> <div className="subtitles"> <NavLink to="test1">test1</NavLink> <NavLink to="test2">test2</NavLink> <NavLink to="test3">test3</NavLink> </div> </div> </div> ); } Вот есть этот блок с ссылками, при нажатии на одну из них - вызывается компонента, которая выводит уже совсем другой контент, мне нужно чтобы этот блок с сылками пропадал после вызова одной из компонент (test1, test2, test3)

Я только начал изучать, извините за глупые, возможно, вопросы

будет правильно присваивать им display: none или как?

exact нужно юзать, почитай доку роутер дрма