Как в JSS сделать селектор в зависимости от родителя? Например, мы стилизуем кнопку, но хотим изменить стиль в зависимости от родителя (или родительского пути). В простом CSS это могло бы быть: .special-parent .this-cool-button { background: red; }

Сделать это в компоненте thisCoolButton

есть пример проектов с использованием css-in-js, чтобы потыкать посмотреть?

Сделать это в компоненте thisCoolButton

Тогда не вижу другого варианта кроме как передавать className в родительском

Или я не догоняю

Наверное всё-таки подход такой неправильный

Ну в mui-next везде можно компоненту указать свой класс

Они на jss. Я туда часто подглядываю в плане решений

(mui-text == materual-ui, ветка next), если кто не знает

есть пример проектов с использованием css-in-js, чтобы потыкать посмотреть?

https://github.com/callemall/material-ui/blob/next/src/Button/Button.js

аригато

охайо

omgf благодарю за такие стикеры!!

в мире react есть альтернатива wtform? желательно с подержкой json-schema

что то я не совсем пойму. если я не коннекчу компонент, а он может получить новые пропсы, но мне таки надо делать такое? componentWillReceiveProps(nextProps) { this.setState({ value: nextProps.value}); }

иначе не происходит ре-рендеринга...

shouldComponentUpdate есть?

нет

А в рендере ты используешь this.props или this.state?

this.state

Может сначала нужно разобраться, зачем тебе state, если ты туда кладёшь значение из props? Может в твоём случае это избыточно

this.state

Используй this.props и всё будет

это обёртка вокруг <input/>

Пытаешься хранить состояние инпута в обёртке?

да

А как будешь значение снаружи получать?

вот от чего то я думал что setState будет

да

Лучше принимай value сверху и функцию onChange

Лучше принимай value сверху и функцию onChange

То есть обёртка над input не нужна )

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

Короче вот: https://facebook.github.io/react/docs/lifting-state-up.html

onChange тоже есть

Можно сразу использовать какой-нибудь redux-form или mobx-form

onChange тоже есть

ТОгда нафига хранить состояние инпута в стейте?

export const Input = ({value, onChange}) => <input value={value} onChange={e => onChange(e.target.value)} />

ТОгда нафига хранить состояние инпута в стейте?

сорри, предусмотрено только, но нет. есть onSubmit

export const Input = ({value, onChange}) => <input value={value} onChange={e => onChange(e.target.value)} />

не, так просто не выйдет. там 100 строчек компонент

сорри, предусмотрено только, но нет. есть onSubmit

Но сабмит должен быть в форме, а не в инпуте

не, так просто не выйдет. там 100 строчек компонент

Да я тут общий принцип показал, без стейта

без стейта — перекладывать данные в стор или в стейт верхнего компонента

такие примитивные "чистые" компоненты я понимаю

Можно сразу использовать какой-нибудь redux-form или mobx-form

https://github.com/formstate/formstate/blob/master/README.md ☝️этот адепт все пилит и пилит новые штуки

Но сабмит должен быть в форме, а не в инпуте

семантическое название

https://github.com/formstate/formstate/blob/master/README.md ☝️этот адепт все пилит и пилит новые штуки

Да, эта штука офигенная, особенно радует поддержка typescript

семантическое название

Ничё не понял. По логике типа onSubmit вызывается тогда, когда в инпуте меняется значение?

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

Ничё не понял. По логике типа onSubmit вызывается тогда, когда в инпуте меняется значение?

когда нажимается ентер или он блур

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

вебшторм

вебшторм

так есть визуальный редактор react’а? оО

так есть визуальный редактор react’а? оО

нет, но есть хорошая интеграция с браузером

нет, но есть хорошая интеграция с браузером

всякие hot reload’ы и подобное?

всякие hot reload’ы и подобное?

да

Так может знает кто?

Хотел спросить у реакт экспертов, если я использую портал-технику для модальных окон, я не пожалею об этом потом? Ну то есть, фб не собирается выпиливать unstable_rendersubtreeintocomponent?

да

не, увы, это не очень интересно =) такое у меня и в саблайме отлично работает.

когда нажимается ентер или он блур

Ну то есть это по сути тот же onChange, только срабатывает по блуру. Тогда да, хранить промежуточное состояние надо в стейте локальном, и ловить componentWillReceiveProps, причём обрабатывать всякие стрёмные штуки типа: componentWillReceiveProps(nextProps) { if (this.props.value !== nextProps.value) this.setState({value: nextProps.value}) // без if введённое значение может неожиданно затереться }

Визуальный редактор это типа мышкой компоненты на странице расставлять?)

Визуальный редактор это типа мышкой компоненты на странице расставлять?)

yep

Хотел спросить у реакт экспертов, если я использую портал-технику для модальных окон, я не пожалею об этом потом? Ну то есть, фб не собирается выпиливать unstable_rendersubtreeintocomponent?

ты про проброс контекста беспокоишься?

Ну то есть это по сути тот же onChange, только срабатывает по блуру. Тогда да, хранить промежуточное состояние надо в стейте локальном, и ловить componentWillReceiveProps, причём обрабатывать всякие стрёмные штуки типа: componentWillReceiveProps(nextProps) { if (this.props.value !== nextProps.value) this.setState({value: nextProps.value}) // без if введённое значение может неожиданно затереться }

про if не совсем понял. поясни, плиз. я понимаю, могут прилететь повторно те же пропсы?

ты про проброс контекста беспокоишься?

Ага

И про бест практис

про if не совсем понял. поясни, плиз. я понимаю, могут прилететь повторно те же пропсы?

Да, по сути если родитель перерендеривается, он перерендеривает своих детей. Без shouldCOmponentUpdate у тебя будет вызван componentWillReceiveProps(), и он затрёт тебе промежуточное значение

Да, по сути если родитель перерендеривается, он перерендеривает своих детей. Без shouldCOmponentUpdate у тебя будет вызван componentWillReceiveProps(), и он затрёт тебе промежуточное значение

а как поможет shouldCOmponentUpdate?

Да, по сути если родитель перерендеривается, он перерендеривает своих детей. Без shouldCOmponentUpdate у тебя будет вызван componentWillReceiveProps(), и он затрёт тебе промежуточное значение

в ифе надо сравнивать тогда не с текущим, а с начальным значением

да?

ERROR: S client not available

Ага

про бест практис не скажу, я юзаю, все норм. там че то в react-bootstrap обсуждали это дело)

в ифе надо сравнивать тогда не с текущим, а с начальным значением

Ну по сути в this.props.value у тебя и будет начальное значение. Если в компонент придёт новое значение, он должен сбросить промежуточное на него. Иначе то как?

Ну по сути в this.props.value у тебя и будет начальное значение. Если в компонент придёт новое значение, он должен сбросить промежуточное на него. Иначе то как?

начальное может отличаться от текущего

Ну или внутри ещё хранить флаг "изменённости", и если он был изменён то игнорить внешщний пропсы до onSubmit

Короче стрёмно это всё )

masked input не сделаешь

или придётся внутрь пробрасывать

componentWillReceiveProps(nextProps) { if (this.state.initialValue !== nextProps.value) this.setState({ value: nextProps.value, initialValue: nextProps.value, storedValue: nextProps.value, isActive: false }); }

я люблю управлять стейтом снаружи полностью

про бест практис не скажу, я юзаю, все норм. там че то в react-bootstrap обсуждали это дело)

Да, я слизал модальный компонент у material-ui. Работает нормально, умеет даже отковаться по отдельному роуту.

componentWillReceiveProps(nextProps) { if (this.state.initialValue !== nextProps.value) this.setState({ value: nextProps.value, initialValue: nextProps.value, storedValue: nextProps.value, isActive: false }); }

ну типа да, и не забыть initialValue обновить при наступлении onSubmit

ну типа да, и не забыть initialValue обновить при наступлении onSubmit

тут пофиг, оно отправится на сервер, а от сервера вернётся по другому каналу и пропишется :)

но щас подумаю, может и правда

Вообще то нет, потому что при обновлении от сервера у тебя новое значение придёт в тот же componentWillReceiveProps и сравнится со старым значением

Ну и кстати нафига три стейта: value, initialValue, storedValue?

ну работает же

Двух вполне достаточно

ну работает же

Значит там какая то ещё магия, например компонент анмаунтится и маунтится

stored на случай нажатия искейпа

А оно не в value останется разве?

Может сначала нужно разобраться, зачем тебе state, если ты туда кладёшь значение из props? Может в твоём случае это избыточно

+

или по эскейпу предполагается отмена изменений?

value меняется при редактировании. затем жмётся esc - откатывается значение

Если отмена то у тебя initialValue для этого есть

оно кажись позже появилось... :)

Пласты кода )

Короче ладно, разобрались кажется

ага... надо вобщем подумать. сенкс

велкам

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

никто не в курсе, да?(

никто не в курсе, да?(

Тебя никто не понял

картбланш