Телеграмм чат группы react

2020 December 27

DS

Dmitriy Shuleshov in React — русскоговорящее сообщество

https://codesandbox.io/s/jovial-hill-f0n6e?file=/src/components/ChatFooter.jsx
добавил стили, если прокрутить наверх и нажать ентер то не пашет((

CodeSandbox

jovial-hill-f0n6e - CodeSandbox

jovial-hill-f0n6e using react, react-dom, react-scripts

Ты знаешь что такое bind и чему равен this внутри функции?

источник

23:14пожаловаться #1

B4

Bet 4 in React — русскоговорящее сообщество

1. Я ожидаю что б это работало так
При нажатии ентер в textarea список прокручивается вниз, если чат прокручен наверх.
2. Пишу для этого вот в этом файле такой код
в ChatMessages.jsx

 function scrollToBottom() {
    console.log("scrolling");

    messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
  }

3. Но поведение вот такое
Не скроллится при нажатии ентер

источник

23:15пожаловаться #2

B4

Bet 4 in React — русскоговорящее сообщество

Dmitriy Shuleshov

Ты знаешь что такое bind и чему равен this внутри функции?

bind привязывает контекст this

источник

23:16пожаловаться #3

DS

Dmitriy Shuleshov in React — русскоговорящее сообщество

Bet 4

1. Я ожидаю что б это работало так
При нажатии ентер в textarea список прокручивается вниз, если чат прокручен наверх.
2. Пишу для этого вот в этом файле такой код
в ChatMessages.jsx

 function scrollToBottom() {
    console.log("scrolling");

    messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
  }

3. Но поведение вот такое
Не скроллится при нажатии ентер

https://codesandbox.io/s/relaxed-bell-14l39

Тут ожидаемое поведение?

источник

23:21пожаловаться #4

B4

Bet 4 in React — русскоговорящее сообщество

Dmitriy Shuleshov

https://codesandbox.io/s/relaxed-bell-14l39

Тут ожидаемое поведение?

если добавить строчку со стилями в чат футер

import "./chatFooter.scss";

то поведение не то

источник

23:40пожаловаться #5

A

Andrey in React — русскоговорящее сообщество

image_2020-12-27_22-46-18.png

(110.69 Кб)

Здравствуйте ребята , подскажите пожалуйста , как сделать переход между страницами без перезагрузки их ?

источник

23:46пожаловаться #6

B4

Bet 4 in React — русскоговорящее сообщество

Andrey

image_2020-12-27_22-46-18.png

(110.69 Кб)

Здравствуйте ребята , подскажите пожалуйста , как сделать переход между страницами без перезагрузки их ?

<Link /> Вообщето есть
https://reactrouter.com/web/guides/quick-start

ReactRouterWebsite

React Router: Declarative Routing for React

Learn once, Route Anywhere

источник

23:47пожаловаться #7

VK

Vlad Kagramanyan in React — русскоговорящее сообщество

Вместо <a> use <link/>

источник

23:49пожаловаться #8

DS

Dmitriy Shuleshov in React — русскоговорящее сообщество

Bet 4

если добавить строчку со стилями в чат футер

import "./chatFooter.scss";

то поведение не то

не воспроизводится...

источник

23:51пожаловаться #9

B4

Bet 4 in React — русскоговорящее сообщество

Dmitriy Shuleshov

не воспроизводится...

чё мне видос заснять? 😄

источник

23:51пожаловаться #10

B4

Bet 4 in React — русскоговорящее сообщество

https://codesandbox.io/s/jovial-hill-f0n6e?file=/src/components/ChatFooter.jsx
если прокрутить наверх список, смотреть первое сообщение, и в текстареа нажать ввод то сообщение новое добавляется, а скролла нет, если нажать баттон сенд то и сообщенеи добавляется и скроллится, ожидаю при ентер то же поведение

CodeSandbox

jovial-hill-f0n6e - CodeSandbox

jovial-hill-f0n6e using react, react-dom, react-scripts

источник

23:54пожаловаться #11

A

Andrey in React — русскоговорящее сообщество

Bet 4

<Link /> Вообщето есть
https://reactrouter.com/web/guides/quick-start

ReactRouterWebsite

React Router: Declarative Routing for React

Learn once, Route Anywhere

спасибо , вот только мне нужно было еще импортировать Link , но гугл помог разобраться в ошибке

источник

23:55пожаловаться #12

A

Andrey in React — русскоговорящее сообщество

Vlad Kagramanyan

Вместо <a> use <link/>

спасибо

источник

23:56пожаловаться #13

2020 December 28

DS

Dmitriy Shuleshov in React — русскоговорящее сообщество

Bet 4

https://codesandbox.io/s/jovial-hill-f0n6e?file=/src/components/ChatFooter.jsx
если прокрутить наверх список, смотреть первое сообщение, и в текстареа нажать ввод то сообщение новое добавляется, а скролла нет, если нажать баттон сенд то и сообщенеи добавляется и скроллится, ожидаю при ентер то же поведение

CodeSandbox

jovial-hill-f0n6e - CodeSandbox

jovial-hill-f0n6e using react, react-dom, react-scripts

https://codesandbox.io/s/relaxed-bell-14l39?file=/src/components/ChatFooter.jsx
Но я бы за такое руки оторвал, зачем юзать textarea и изменять дефолтное поведение (ctrl + enter для сабмита) И мой вам совет: изучите хорошо js вначале, а то дальше будет тяжело

источник

00:17пожаловаться #14

B4

Bet 4 in React — русскоговорящее сообщество

Dmitriy Shuleshov

https://codesandbox.io/s/relaxed-bell-14l39?file=/src/components/ChatFooter.jsx
Но я бы за такое руки оторвал, зачем юзать textarea и изменять дефолтное поведение (ctrl + enter для сабмита) И мой вам совет: изучите хорошо js вначале, а то дальше будет тяжело

1. а чё юзать тогда? нужен контейнер для мультилайн текста
2. учу😊

источник

00:21пожаловаться #15

DS

Dmitriy Shuleshov in React — русскоговорящее сообщество

Bet 4

1. а чё юзать тогда? нужен контейнер для мультилайн текста
2. учу😊

а как теперь юзер будет делать мульти лайн когда вы у него энтер забрали?

источник

00:23пожаловаться #16

B4

Bet 4 in React — русскоговорящее сообщество

Dmitriy Shuleshov

а как теперь юзер будет делать мульти лайн когда вы у него энтер забрали?

просто напишу если ивент не содержит Shift, тогда отправка

источник

00:31пожаловаться #17

DS

Dmitriy Shuleshov in React — русскоговорящее сообщество

Bet 4

просто напишу если ивент не содержит Shift, тогда отправка

KeyboardEvent.shiftKey вам в помощь

источник

00:33пожаловаться #18

B4

Bet 4 in React — русскоговорящее сообщество

Dmitriy Shuleshov

KeyboardEvent.shiftKey вам в помощь

я в курсе)
спасибо,

nativeEvent.key

работает)

источник

00:44пожаловаться #19

АН

Андрей Негруша... in React — русскоговорящее сообщество

Всем привет, делаю самодельное трелло)
Хотел спросить.
Я использую json-server и когда загружаю данные при помощи axios.post у меня в каждом обьекте создается универсальный id - при помощи которого я потом и могу, например, удалять необходимые обьекты.
Так вот, получается после того как я создал 3 обьекта у каждого из них свой уникальный id - 1,2 и 3.

источник

00:49пожаловаться #20