Albert
я тоже так думал
Albert
но у меня все рабоатет, но выводит в консоли вот так (render -> render - useEffect)
Albert
вот так у меня коноль выглядит
Albert
но работает, по принципу,к оторый ты написал выше
Michael
гайс всем привет! у меня проблема - очень надеюсь на вашу подсказку, исключительно в каком русле двигаться, решение мне не нужно - хочу сам. и так вопрос :
я давно еще написал сайт исключительно html\css\js и сейчас переписал его в react, но вот незадача - там у меня было 2 html файла - один открывался как заставка сайта и при нажатии на кнопку перенаправляло на сам сайт. так вот как мне сделать тоже самое в react? заранее спасибо
Albert
я суть useEffect понял
Albert
но не понял магию, которая отображается в самой консоли
Albert
я вот тоже о нем думал - значит по этому принципу двигаться?
при клике на кнопку (делаешь ее navLink, меняется url страницы и другой Router отрисовывает вторую страницу)
Michael
я вас услышал - всем спасибо и успехов. ушел делать
Albert
там у димыча это в первых 10 уроках вроде бы
Artem
Друзья товарищи кто подскажет как программно изменить стиль определенного DOM элемента?
Например есть таблица в ней столбец со статусами пользователя, над сделать чтоб у васи пипкина статус засветился зеленым.
Albert
скинь свой код
import React, {useState, useEffect} from 'react';
// import Preloader from '../../common/preloader/Preloader';
const ProfileStatusWithHooks = (props) => {
let [editMode, setEditMode] = useState(false); // editMode = false
let [status, setStatus] = useState(props.status); // status = props.status
// let arr = [0, () => {}];
// let [a, setA] = arr;
// let stateWithSetState = useState(true);
// let editMode = stateWithSetState[0];
// // здесь сидит первое значение (то есть false)
// let setEditMode = stateWithSetState[1];
// // функция, которая изменяет одиночное значение
// //(устанавливает значение это (в данном случае это false))
useEffect(() => { // срабатывает в самом конце компоненты
setStatus(props.status);
console.log("Effect");
}, [props.status]); // определяется зависимость в []
// отрисовки (первый раз само, а дальше по зависимости)
const activateMode = () => {
setEditMode(true);
}
const deactivateEditMode = () => {
setEditMode(false);
props.updateStatus(status);
}
const onStatusChange = (e) => {
setStatus(e.currentTarget.value);
}
return (
<div>
{console.log("return")}
{!editMode
? <div>
<span onDoubleClick={activateMode}>
{props.status || "No status"}</span>
</div>
: <div>
<input onChange={onStatusChange}
autoFocus={true}
onBlur={deactivateEditMode}
value={status}></input>
</div>}
</div>
);
}
export default ProfileStatusWithHooks;
Albert
Artem
ну я на кнопку например нажимаю)
Dmitry
// срабатывает в самом конце компоненты - срабатывает когда статус меняется
Albert
ну я на кнопку например нажимаю)
при клике на кнопку, добаляешь по алгоритму класс, в котором прописаны стили, что статус у него зеленый
Artem
при клике на кнопку, добаляешь по алгоритму класс, в котором прописаны стили, что статус у него зеленый
бля это я понимаю, а как выбрать именно тот у которго над изменить?
Albert
при клике, вызываешь функциЮ. в которой пишешь, что кнопке нужно добаить класс Green (к примеру) и статус поменяет свой цвет
Albert
бля это я понимаю, а как выбрать именно тот у которго над изменить?
я немного не понимаю, тебе одного пользователя нужно? или как?) я просто не понимаю алгоритм. Если тупо конкретного челика, то просто берешь его id и по id класс добовляешь
Artem
к примеру
Пользователь 1 Статус 1
Пользователь 2 статус 2
Пользователь 3 Статус 3
....
Вот у пользователя 2 над зажечь статус зеленым) так как ты предлагаешь они все зеленым загорятся)
Albert
Artem
да
Albert
пользователи находятся в props
Albert
верно?)
Artem
пользователи записаны в таблицу уже
Albert
го в лс)
Chingiz
Илья
Кто хочет простыми словами объяснить что такое componentDidMount и когда он срабатывает)?
Oleg
Димыч
Chingiz
Кто хочет простыми словами объяснить что такое componentDidMount и когда он срабатывает)?
constructor > getDerivedStateFromProps > render > componentDidMount срабатывает один раз после каждого рендера, как смог объяснил)))
Chingiz
http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
Илья
Nikolai
Nikolai
Всем привет. Понимаю, что вопрос не по реакту, но связан с js . Подскажите что делает выделенная строчка кода.
Nikolai
Я понимаю что это тернарное выражение. Но что что оно делает
Nikolai
Что такое curObject никак не могу понять
Oleg
безсмыслица написана
Oleg
а хотя
Oleg
что делает функция Trim ?
Albert
if else
Albert
Что такое curObject никак не могу понять
нужно смотреть весь окд и понять, но выражение есть, и она на основе ответа true/false из isNew выдает первый либо второй результат
Albert
1 - после ?, а 2 - полсе :
Oleg
а ваша функция что делает
Nikolai
Спасибо всем
Oleg
ну прост тупо писать Trim("dfgkjdfg") там не пробелов
Oleg
или Trim("{zalupa}") - тут нет пробелов
Oleg
да, поищи
Albert
хаххаха
Daniil
на сколько я понял там не совсем js
Daniil
так как простые кавычки не интерполируются
Oleg
ну тогда да
Oleg
шаблонизатор наверн
Koks
Trim убирает пробелы в начале и в конце строки
Daniil
может это вообще VBA какой-нить)
Oleg
ой
Daniil
😂
Oleg
https://twitter.com/dan_abramov/status/1191830140713496581
Oleg
😆совпадение... не думаю
Daniil
😂
Dmitry
https://78.media.tumblr.com/234c43e1dbd2eae52516ec6793ec8283/tumblr_okvste5MzI1qmob6ro1_500.gif
Oleg
не открывает
Timur
змий пожирающий сам себя
Dmitry
Дмитро
SᑎOᙖOᖇᑎ
у меня есть кнопка при нажатии исполняеться что-то
как мне сделать, что б при нажатии на ентер делалось тоже что и при клике на кнопку?
есть куча примеров с тектовим инпутом, но оно не подходит