АБ
здесь реакт, не react-native
Size: a a a
2020 October 21
KB
еще раз повторить что ты не в том чате?
сорри
A
Всем привет!
У менять есть компонент <Input /> которые генерируются кнопкой и выводятся также в случае, если приходит массив строк, на каждый элемент массива.
Задача по кнопке получить все value текущих инпутов.
Сейчас пытаюсь это сделать через:
const handleChange = name => event => {
event.persist();
setExample(st => ({...st, [name]: event.target.value}));
};
Но как-то криво работает) Мб кто подскажет рабочий обработчик для таких случаев :)
Заранее спасибо!
У менять есть компонент <Input /> которые генерируются кнопкой и выводятся также в случае, если приходит массив строк, на каждый элемент массива.
Задача по кнопке получить все value текущих инпутов.
Сейчас пытаюсь это сделать через:
const handleChange = name => event => {
event.persist();
setExample(st => ({...st, [name]: event.target.value}));
};
Но как-то криво работает) Мб кто подскажет рабочий обработчик для таких случаев :)
Заранее спасибо!
A
всем привет, подскажите пожалуйста
есть страница (контейнер), на ней выводятся компоненты: форма поиска и элементы (объекты). работает на редаксе, но, думаю, это не важно в этом случае
в контейнере есть обработчик для формы, состояние для инпутов и через connect() передаю элементы в компонент для элементов
----
вопрос: почему при изменении инпутов перерендеривается не только компонент формы, но и компонент с объектами? И правильная ли практика передавать пропсами в тупые компоненты от страницы (контейнера) вниз? На скрине сам контейнер в котором находятся состояние и все обработчики
есть страница (контейнер), на ней выводятся компоненты: форма поиска и элементы (объекты). работает на редаксе, но, думаю, это не важно в этом случае
в контейнере есть обработчик для формы, состояние для инпутов и через connect() передаю элементы в компонент для элементов
----
вопрос: почему при изменении инпутов перерендеривается не только компонент формы, но и компонент с объектами? И правильная ли практика передавать пропсами в тупые компоненты от страницы (контейнера) вниз? На скрине сам контейнер в котором находятся состояние и все обработчики
A
Доброе утро, объясните плиз,
1) почему удаляется el при повторном нажатии
2) почему удаляется div в соседнем элементе
const Portal = ({ children }) => {
const modalRoot = document.getElementById("modal-root");
const el = document.createElement("div");
useEffect(() => {
modalRoot.appendChild(el);
}, []);
useEffect(() => {
return () => modalRoot.removeChild(el);
});
return createPortal(children, el);
};
<body>
<div id="root"></div>
<div id="modal-root"></div>
</body>
Соответственно, при клике, обновляется стэйт
1) почему удаляется el при повторном нажатии
2) почему удаляется div в соседнем элементе
const Portal = ({ children }) => {
const modalRoot = document.getElementById("modal-root");
const el = document.createElement("div");
useEffect(() => {
modalRoot.appendChild(el);
}, []);
useEffect(() => {
return () => modalRoot.removeChild(el);
});
return createPortal(children, el);
};
<body>
<div id="root"></div>
<div id="modal-root"></div>
</body>
Соответственно, при клике, обновляется стэйт
YZ
Alex
Доброе утро, объясните плиз,
1) почему удаляется el при повторном нажатии
2) почему удаляется div в соседнем элементе
const Portal = ({ children }) => {
const modalRoot = document.getElementById("modal-root");
const el = document.createElement("div");
useEffect(() => {
modalRoot.appendChild(el);
}, []);
useEffect(() => {
return () => modalRoot.removeChild(el);
});
return createPortal(children, el);
};
<body>
<div id="root"></div>
<div id="modal-root"></div>
</body>
Соответственно, при клике, обновляется стэйт
1) почему удаляется el при повторном нажатии
2) почему удаляется div в соседнем элементе
const Portal = ({ children }) => {
const modalRoot = document.getElementById("modal-root");
const el = document.createElement("div");
useEffect(() => {
modalRoot.appendChild(el);
}, []);
useEffect(() => {
return () => modalRoot.removeChild(el);
});
return createPortal(children, el);
};
<body>
<div id="root"></div>
<div id="modal-root"></div>
</body>
Соответственно, при клике, обновляется стэйт
не вникая в код, что у вас там происходит, но useEffect без массива зависимостей будет вызываться на каждый рендер
RB
Всем привет! Подскажите плиз, как можно отобразиь элементы находищиеся в DOM, но не относящиеся к компоненту, который рендерим?
YZ
Ramil Bogdanov
Всем привет! Подскажите плиз, как можно отобразиь элементы находищиеся в DOM, но не относящиеся к компоненту, который рендерим?
использовать стейт менеджер либо общего родителя, в котором вызывать функцию для необходимых изменений (либо контекст)
EM
всем привет, подскажите пожалуйста
есть страница (контейнер), на ней выводятся компоненты: форма поиска и элементы (объекты). работает на редаксе, но, думаю, это не важно в этом случае
в контейнере есть обработчик для формы, состояние для инпутов и через connect() передаю элементы в компонент для элементов
----
вопрос: почему при изменении инпутов перерендеривается не только компонент формы, но и компонент с объектами? И правильная ли практика передавать пропсами в тупые компоненты от страницы (контейнера) вниз? На скрине сам контейнер в котором находятся состояние и все обработчики
есть страница (контейнер), на ней выводятся компоненты: форма поиска и элементы (объекты). работает на редаксе, но, думаю, это не важно в этом случае
в контейнере есть обработчик для формы, состояние для инпутов и через connect() передаю элементы в компонент для элементов
----
вопрос: почему при изменении инпутов перерендеривается не только компонент формы, но и компонент с объектами? И правильная ли практика передавать пропсами в тупые компоненты от страницы (контейнера) вниз? На скрине сам контейнер в котором находятся состояние и все обработчики
Потому что меняются props/state этого компонента или родитель
Нужно больше кода, так ничего не понятно
Нужно больше кода, так ничего не понятно
RB
использовать стейт менеджер либо общего родителя, в котором вызывать функцию для необходимых изменений (либо контекст)
понял, спасибоЙ
A
не вникая в код, что у вас там происходит, но useEffect без массива зависимостей будет вызываться на каждый рендер
то есть по идее, стэйт обновился, он делает modalRoot.removeChild(el), но не делает modalRoot.appendChild(el), так как это только при маунте?
YZ
Alex
то есть по идее, стэйт обновился, он делает modalRoot.removeChild(el), но не делает modalRoot.appendChild(el), так как это только при маунте?
https://overreacted.io/a-complete-guide-to-useeffect/
почитай, должно стать по местам у тебя в голове как это работает
почитай, должно стать по местам у тебя в голове как это работает
A
теперь это ясно, но почему тогда удаляется див в root?
BE
это должен быть один экшн, который разбирается, что куда, и рассылает другие экшны
А где лучше разруливать коннекты websocket ? я делаю это в миддлваре,
Хочу попробовать через родительский компонент,
Хочу попробовать через родительский компонент,
A
Потому что меняются props/state этого компонента или родитель
Нужно больше кода, так ничего не понятно
Нужно больше кода, так ничего не понятно
примерно так на рабочем примере выглядит, только array приходит из редакса https://codesandbox.io/s/determined-darkness-ljf2n?file=/src/App.js
RU
А где лучше разруливать коннекты websocket ? я делаю это в миддлваре,
Хочу попробовать через родительский компонент,
Хочу попробовать через родительский компонент,
именно вешать лисенеры? я бы вообще вне реакта это делал. в месте инициализации приложения, там где store создаёшь
BE
именно вешать лисенеры? я бы вообще вне реакта это делал. в месте инициализации приложения, там где store создаёшь
да создавать соединение или обрубать
Мне нужно создавать WS после авторизации, не могу не в реакте
Мне нужно создавать WS после авторизации, не могу не в реакте
A
Потому что меняются props/state этого компонента или родитель
Нужно больше кода, так ничего не понятно
Нужно больше кода, так ничего не понятно
это видно после включения в devtools Highlight updates when components render. Или это вообще норма, что так ререндерятся? можно ли это оптимизировать?
A
Всем привет!
У менять есть компонент <Input /> которые генерируются кнопкой и выводятся также в случае, если приходит массив строк, на каждый элемент массива.
Задача по кнопке получить все value текущих инпутов.
Сейчас пытаюсь это сделать через:
const handleChange = name => event => {
event.persist();
setExample(st => ({...st, [name]: event.target.value}));
};
Но как-то криво работает) Мб кто подскажет рабочий обработчик для таких случаев :)
Заранее спасибо!
У менять есть компонент <Input /> которые генерируются кнопкой и выводятся также в случае, если приходит массив строк, на каждый элемент массива.
Задача по кнопке получить все value текущих инпутов.
Сейчас пытаюсь это сделать через:
const handleChange = name => event => {
event.persist();
setExample(st => ({...st, [name]: event.target.value}));
};
Но как-то криво работает) Мб кто подскажет рабочий обработчик для таких случаев :)
Заранее спасибо!
A
Alexandr
Всем привет!
У менять есть компонент <Input /> которые генерируются кнопкой и выводятся также в случае, если приходит массив строк, на каждый элемент массива.
Задача по кнопке получить все value текущих инпутов.
Сейчас пытаюсь это сделать через:
const handleChange = name => event => {
event.persist();
setExample(st => ({...st, [name]: event.target.value}));
};
Но как-то криво работает) Мб кто подскажет рабочий обработчик для таких случаев :)
Заранее спасибо!
У менять есть компонент <Input /> которые генерируются кнопкой и выводятся также в случае, если приходит массив строк, на каждый элемент массива.
Задача по кнопке получить все value текущих инпутов.
Сейчас пытаюсь это сделать через:
const handleChange = name => event => {
event.persist();
setExample(st => ({...st, [name]: event.target.value}));
};
Но как-то криво работает) Мб кто подскажет рабочий обработчик для таких случаев :)
Заранее спасибо!
юзай formik, final-form или react hook form, там меньше костылить будешь