Народ, кто юзал react-formal? Там есть возможность валидировать каждый отдельный инпут по keyUp, например?

В смысле, не всю форму разом, а отдельные инпуты по мере ввода текста?

А то документация у них никакая

У меня просто в проекте валидируются отдельные инпуты при редактировании. Вот я и думаю, имеет ли смысл связываться с react-formal?

Я думаю, с этими штуками вообще не имеет смысла связываться

Учитывая, как просто в реакте делать валидацию

Тоже есть такое подозрение и опасение )

Да, в реакте делать валидацию просто. Но минус стандартного подхода (у меня), что для каждого инпута делается экшн-креэйтор, редьюсер, и еще пишется код валидации в мидлваре (я лично юзаю redux-observable, но это не принципиально). В итоге проект обрастает большим колличеством кода. А вот библиотеки типа react-formal предлагают очень удобное описание всей формы на основе схемы. Это более наглядно. Но вот можно ли там валидировать отдельные поля?

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

И вот можно ли при таких задачах использовать react-formal?

Да, в реакте делать валидацию просто. Но минус стандартного подхода (у меня), что для каждого инпута делается экшн-креэйтор, редьюсер, и еще пишется код валидации в мидлваре (я лично юзаю redux-observable, но это не принципиально). В итоге проект обрастает большим колличеством кода. А вот библиотеки типа react-formal предлагают очень удобное описание всей формы на основе схемы. Это более наглядно. Но вот можно ли там валидировать отдельные поля?

Мне кажется, это какой-то оверинженеринг

Один экшн на всю форму, один редюсер

Одно поле errors

Мне кажется, это какой-то оверинженеринг

А как бы вы при этом реализовали валидацию поля во время его редактирования?

Если есть такая задача

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

Еще до того, как ты засабмитил ВСЮ форму

Я бы сделал один единственный экшн FORM_CHANGE, значения формы держал бы в редуксе

Я говорю о ситуации, когда ЗАКАЗЧИК предоставил требование валидировать каждый инпут в отдельности )

Да понятно

А, в смысле, вы предлагаете валидировать всю форму при каждом keyUp?

Ну или так или иначе, вызывать этот экшн при нажатии keyUp?

В принципе, об этом можно подумать...

Да

Спасибо за наводку! )

Я за телефоном, не могу много кода, но идея такая - все изменения пустить через одно место, заполнять или очищать переменную errors

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

Errors:{ name: 'это поле должно быть заполнено', system: 'ошибка сервера'}

Кто-то сейчас юзает react- transmit?

А как бы вы при этом реализовали валидацию поля во время его редактирования?

<input type="text" onChange={this.handleChange} /> в хэндлере: handleChange(evt) { this.setState({ errors: { ...this.state.errors, [evt.target.name]: evt.target.willValidate, }, }); }

Ребят, чет я не пойму почему moment.js format('MMM') возвращает не September, а 099

oO

сталкивался кто?

а тебе нужно 099? :))

ой, прочитал неверно

Сорри, нет. Должна быть краткая форма

вот такая ерунда

а MMM должен ‘Sep’

Так он выводит мне вовсе 099

а есть полный код?

moment(p.date).format("MMM")

как сделать чтобы вебпак инклудил мои стили выше всех?

И вот можно ли при таких задачах использовать react-formal?

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

Есть чат по React совсем для пней?

Есть чат по React совсем для пней?

добро пожаловать

это он и есть

Спасибо. Мне просто объяснить концепцию. Что умеет сервер. Отвечать на запросы состояния, включать/выключать свои задания и 3-party oAuth. Что-то я сомневаюсь, что это все можно запихнуть в один компонент. Да и пользователю видеть все в один момент не нужно. Плюс, есть желание не нагружать сервер в тот момент, когда вкладка браузера не нагружена. Как я себе это представляю. Нужен общий модуль на сервере для авторизованных запросов и модуль видимости вкладки на клиенте. Через что лучше добавить эти фичи в два компонента: мониторинг сервиса и панель команд пользоваиеля?

Если бы это был ангуляр, я б двумя сервисами в одно аппе обошелся бы.

компоненты они для view

ну типа как компоненты\директивы в angular1.5

А, т.е. вообще не надо в них функционал заливать? Только view действия?

ну да, как организовать всякие сервисы и прочее в реакте разные подходы есть

redux/mobx тут что больше нравится

Вот мне про самый простой подход. Например, общий сервис на запрос состояния. Он опрашивает сервер, меняет состояние приложения и view сама меняется. Так выходит?

Ок, теперь дошло. Блин, век живи - век учись.

view сама не меняется, ей надо сообщить, что что-то изменилось

ERROR: S client not available

с этим могут помочь как раз react-redux или чето там у mobx(это больше похоже на ангуляровское будет)

Ага, спасибо.

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

А можно ли в react-formal выполнять удаленную валидацию ТОЛЬКО в случае если нет ошибок локальной валидации? Просто что б уменьшить число запросов к серверу?

Я просто пока не понял, есть ли там возможность в обработчике onChange формы получить ошибки локальной валидации?

-

-

А можно ли в react-formal выполнять удаленную валидацию ТОЛЬКО в случае если нет ошибок локальной валидации? Просто что б уменьшить число запросов к серверу?

onSubmit не триггерится и так, если у тебя локально есть ошибки валидации

Если тебе нужно в onChange получить статус валидации текущих значений ты всегда можешь сделать scheme.validate(currFormValues, ...).then(...).catch(...)

Если тебе нужно в onChange получить статус валидации текущих значений ты всегда можешь сделать scheme.validate(currFormValues, ...).then(...).catch(...)

Спасибо! То-есть валидация выполнится дважды. Хотя это и не критично

-

Тут ты можешь удалять сообщения

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

https://github.com/facebook/react/blob/master/src/renderers/shared/stack/reconciler/ReactHostComponent.js#L18

Есть два стейтлес компонента. Один является родителем другого. При выполнении дочернего компонента мне нужно получить ширину родителя и, в соответствии с ней, скорректировать ширину DOM-елемента дочернего компонента. Вопрос в том, существует ли DOM-елемент родителя в момент выполнения дочернего компонента? И, если да, то как его получить? Если же нет, то мне остаётся вешать обработчик, который запустится после отрисовки всей цепочки компонентов? Куда его, в таком случае, вешать?

в родителе делаешь ref, передаешь его ширину как проперти дочернему

в родителе делаешь ref, передаешь его ширину как проперти дочернему

Можно пальцем ткнуть в мануал? =)

https://facebook.github.io/react/docs/more-about-refs.html

https://facebook.github.io/react/docs/more-about-refs.html

Спасибо. =)

Парни, а по ноде есть такой же чатик, кто нибудь знает?

@nodejs_ru

Спасибо!

Есть два стейтлес компонента. Один является родителем другого. При выполнении дочернего компонента мне нужно получить ширину родителя и, в соответствии с ней, скорректировать ширину DOM-елемента дочернего компонента. Вопрос в том, существует ли DOM-елемент родителя в момент выполнения дочернего компонента? И, если да, то как его получить? Если же нет, то мне остаётся вешать обработчик, который запустится после отрисовки всей цепочки компонентов? Куда его, в таком случае, вешать?

ReactDOM.findDOMNode(this).parentNode в componentDidMount у childa, рефы не нужны

ReactDOM.findDOMNode(this).parentNode в componentDidMount у childa, рефы не нужны

Оба стейтлес. componentDidMount() — метод класса.

Без лайфцайкла не выйдет

Вот здесь непонятно.

Размер ты сможешь получить только когда компонент будет отрендерен

Flux же однозначно подразумевает стейтлес?

Flux то тут при чем?

Размер ты сможешь получить только когда компонент будет отрендерен

Это понятно.