VN
Здрастуйте, подскажите пожалуйста, какие способы стилизации в React наиболее часто встречающиеся ?
Style module
Size: a a a
2020 January 29
𝐁𝐏
Classnames, css-modules, styled-components
Что-то вот уже 2 дня пробую, и не понял их.
Styled-component - как правильно выносить и потом обратно импортировать стили, в которых есть keyframes?
Сss-modules - как там в принципе заставить работать keyframes?
Reshadow - как в принципе запустить без eject ?
classnames попробую, спасибо)
Styled-component - как правильно выносить и потом обратно импортировать стили, в которых есть keyframes?
Сss-modules - как там в принципе заставить работать keyframes?
Reshadow - как в принципе запустить без eject ?
classnames попробую, спасибо)
2020 January 30
LK
Ребят а какие методы в react-hooks есть для того что б сохраниться предыдущий стейт до изменения, пример следующий, есть datepicker у него меняется дата, нужно сохранять дату до открытия самого datePicker, если дата изменена и нажата кнопка Cancel то вернуть дату до того как был открыт datePicker
LK
прием с usePrevius не совсем подходит, поскольку он возвращает prop до предыдущего onChange
LK
можно конечно добавить экшен в колбек на открытие который будет сохранять текущую дату но это такой себе вариант
K
так не прокатит?
const Component = ({ value, onChange }) => {
const [newValue, setNewValue] = useState(value)
return <div>
<input type="text" value={newValue} onChange={event => setNewValue(event.target.value)}/>
<button onClick={() => { setNewValue(value) }}>reset</button>
<button onClick={() => { onChange(newValue) }}>save</button>
</div>
}
const Component = ({ value, onChange }) => {
const [newValue, setNewValue] = useState(value)
return <div>
<input type="text" value={newValue} onChange={event => setNewValue(event.target.value)}/>
<button onClick={() => { setNewValue(value) }}>reset</button>
<button onClick={() => { onChange(newValue) }}>save</button>
</div>
}
LK
так не прокатит?
const Component = ({ value, onChange }) => {
const [newValue, setNewValue] = useState(value)
return <div>
<input type="text" value={newValue} onChange={event => setNewValue(event.target.value)}/>
<button onClick={() => { setNewValue(value) }}>reset</button>
<button onClick={() => { onChange(newValue) }}>save</button>
</div>
}
const Component = ({ value, onChange }) => {
const [newValue, setNewValue] = useState(value)
return <div>
<input type="text" value={newValue} onChange={event => setNewValue(event.target.value)}/>
<button onClick={() => { setNewValue(value) }}>reset</button>
<button onClick={() => { onChange(newValue) }}>save</button>
</div>
}
у меня ведь value меняется при onChange, соответственно в твоем примере я буду получать предыдущий, а мне нужно для onCancel возвращать value до открытия Calendar
LK
грубо говоря мне нужно как то захолдить prop
K
useRef ?
LK
useRef ?
всмысле? а при чем здесь useRef?
LK
эмм походу мне нужно освежить знания по данному хуку)
LK
я всегда думал что он нужен для того что б просто вернуть ссылку на DOM элемент
K
там что хочешь можно хранить)
LK
там что хочешь можно хранить)
типо как значение по умолчанию у него Generic)
LK
лол
LK
я и не знал
SS
можно конечно добавить экшен в колбек на открытие который будет сохранять текущую дату но это такой себе вариант
в датапікера повинни бути методи типу onClose onOpen onCencel, от на он опен дату пиши в реф, а якщо відміну тикнули. то назад її сеть
LK
в датапікера повинни бути методи типу onClose onOpen onCencel, от на он опен дату пиши в реф, а якщо відміну тикнули. то назад її сеть
проблема была не в методах а именно в hold prop
SS
та можна писати хоч в звичайну змінну яку обявити out of компонент
SS
можна сетить стейт - але зайвий рендер тут не потрібний