Китикет
Artem
Каким?
Произошёл троллинг, извините
Китикет
Коллбеком
Вот что пробовал 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 для валидации всех полей пришлось делать отдельную функцию и явно все поля ей передавать Короче сплошная боль
va1
пасиба)я ж грю замылились.)особенно когда в первый раз над этим сидишь
Если этот компонент только для рендера входящего массива, то хранить его в стейте необязательно, можно сразу пропсы рендерить. Меняются пропсы - обновляется компонент. Я так понял, фильтрация массива в родителе. Ещё инициализировать стейт из пропсов в конструкторе считается антипаттерном, не исключена возможность рассинхрона данных. Конструктор вызывается лишь один раз, когда компонент 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) Если есть хоть одна ошибка - подсветить поле (поля) с ошибками и выйти из хендлера сабмита Если нет ошибок - выполнить с полученными значениями определенное действие и сбросить форму
Кстати до этого оно было реализовано так - просто 4 useState и пара useCallback Меня смущало то, что handleSubmit создавался заново при каждом рендере (ну понимаете, из-за deps, в которых все значения инпутов лежат, поэтому я решил какой-нибудь форм менеджер взять) К слову, строк там было меньше (ну это можно обьяснить тем, что в форме все поля - селекты, их сложнее связывать с форм менеджерами)
Китикет
Не работал с файнал формом, но это настолько базовый кейс, что 99% ты не разобрался, а не в пакете дело
Ну блин, я даже в issues залез, а до этого посмотрел 3 примера с валидациями и reset'ом
Artem
Чтобы эвенты не пересоздававший, оберни в useCallback
Китикет
Там и так в useCallback обернуто, просто при каждом изменении значения в инпуте содержимое deps в useCallback меняется, а значит handleSubmit заново создается, в классах можно бы было этого избежать кстати
Китикет
Ладно, короче пока что так сойдет, это все не очень больно
Artem
Да и тут можно ... если хочется лишних ререндеров избежать, то что-то типо react-tracked + immute для создания стейта
Artem
В первом есть примеры различные
Китикет
Люди обычно вообще колбеки в рендере плодят по 10 штук) А тут 1 всего-лишь
Китикет
Лучше уж чуток память засорить до сборки, чем в каждом рендере заставлять useCallback сравнивать deps
Китикет
Походу виновато мое параноидальное стремление к производительности, хотя там и так все норм работало, но это я уже сам с собой начал общаться, всем добра
D_d
Народ а что за фигня, когда жму на Link элемент то он прибавляет все время в к пути ссылку
D_d
Типа был /main/
D_d
Жму на линк который должен вести к users и если кликнуть несколько раз то выходит путь /main/users/users/users/
Ivan
<NavLink to='/counter' activeStyle={{color:'red'}}>Counter</NavLink>
Андрей
Как добавить класс когда я прохожу map this.props.children.map, мне на каждой итерации возвращается реакт элемент, а как клас добавить?
Андрей
Как добавить класс когда я прохожу map this.props.children.map, мне на каждой итерации возвращается реакт элемент, а как клас добавить?
Андрей
React.cloneElement
Что т не пойму как применить, так всё равно возвращается реакт объект
Андрей
ну так пропы другие передай
Щас вижу что класс в объект добавился, а как теперь в дом структуру это вывести, с добавленными классами?
Андрей
Так вывожу в render но ничего не выводится
Андрей
Anonymous
Учу
тебе нужно вернуть из функции this.props.children.map, это первое второе, зачем вообще функция? вынеси все, что в ней внутри, в render третье, не совсем понятно зачем ты создал компонент как класс, если тебе не нужен стейт или жизненные циклы
Dmytro
тебе нужно вернуть из функции this.props.children.map, это первое второе, зачем вообще функция? вынеси все, что в ней внутри, в render третье, не совсем понятно зачем ты создал компонент как класс, если тебе не нужен стейт или жизненные циклы
А почему бы все не писать в классах? Потому, что это 1 - стильно 2 - модно 3 - молодежно Ну и что плохого в том, что бы что-то вынести в функцию? Доебался короче, ты к парнише. А то шо он ретурн пропустил это да) Жс учить нада)
Андрей
тебе нужно вернуть из функции this.props.children.map, это первое второе, зачем вообще функция? вынеси все, что в ней внутри, в render третье, не совсем понятно зачем ты создал компонент как класс, если тебе не нужен стейт или жизненные циклы
this.props.children.map - я вернул, пока я только начинаю, а вообще думаю я буду заводить стейт всётаки , а лайвсайклы пока хз нужны ли будут, я просто первый раз сам хочу попрактиковаться в создании слайдера
artalar
Как добавить класс когда я прохожу map this.props.children.map, мне на каждой итерации возвращается реакт элемент, а как клас добавить?
Может не нужно впринципе устанавливать свойства элементов не в месте их инициализации? Это не очень круто поддерживать
Dmytro
Жс вообще избыточный. Бауэр, нпм, йарн. 3 вебпака. Тайпскрипт. Новый фреймворк раз в 2 недели. Шо впадло выучить синтаксис классов?
Vladislav
Я ангулярщик, извиняйте)
там потом заместо функций что нить новое придумают, а старое начнут хейтить, классика)
artalar
Проблема в том что классы не деприкейтед реакт-тимой, как бы, но уже деприкейтед всей(!) экосистемой
Kurzdor
А хочет ввести хук апи 🤷‍♂
Arthur
Проблема в том что классы не деприкейтед реакт-тимой, как бы, но уже деприкейтед всей(!) экосистемой
Где-то читал, что они хотят предоставить возможность писать без классов, чтобы получить прекомпиляцию и фолдинг компонентов. Классы могут баги давать и всё ломать
Anonymous
А хочет ввести хук апи 🤷‍♂
интересно, зачем вую хуки
Kurzdor
Даже вью там выбросил в помойку Class API в 3 версии
Выбросил в помойку еще на стадии rfc
Arthur
Выбросил в помойку еще на стадии rfc
Никто никуда не выбросил, да и очень многие из вьюшников это неоднозначно восприняли
Андрей
Что т не пойму React.cloneElement метод у реакта.. Почему возвращается вместо 1 - 111111, 2 - 22222 и тд?
artalar
И повторюсь, крайне не рекомендую использовать cloneElement
Андрей
Я хочу всем детям тоесть слайдам, проставить класс свой
Anonymous
Я хочу всем детям тоесть слайдам, проставить класс свой
В чем проблема здесь задать им классы?
Андрей
В чем проблема здесь задать им классы?
Да ни в чем, просто я хотелось что бы сразу автоматом проставились классы
Anonymous
Да ни в чем, просто я хотелось что бы сразу автоматом проставились классы
это оверинжинеринг ты, видимо, не верстал никогда сайты, раз не хочешь так делать)
Vasyl
Приветульки, мне нужно чтобы при нажатии на ссылку (при вызове компоненты) появлялась полностью новая страница, как это можно сделать и чтобы не считалось за костыли?
Daniil
Что значит полностью новая ?
Vasyl
Что значит полностью новая ?
Не похожая на старую.
Daniil
🤔
Vasyl
Новый контент.
Vasyl
URL у меня меняется, контент тоже меняется на странице в зависимости от URL`a, но эти ссылки остаются после нажатия на них, а мне нужно чтобы пропадал этот блок с ними и поверх уже выводился новый контент
Vasyl
будет правильно присваивать им display: none или как?
Arthur
ничего не понял. опиши нормально требования, опиши то, что есть на данный момент и какой подход используешь, сбрось пример кода (было бы идеально). здесь не ванги, так тебе точно никто не поможет
Vasyl
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)
Vasyl
Я только начал изучать, извините за глупые, возможно, вопросы
Vadim
будет правильно присваивать им display: none или как?
exact нужно юзать, почитай доку роутер дрма