ReactJS / JavaScript: во многих случаях не получают событие изменения размера - PullRequest
Новая
       22

ReactJS / JavaScript: во многих случаях не получают событие изменения размера

0 голосов
/ 23 мая 2019

Я работаю над интерфейсом чата и хочу, чтобы элементы журнала чата помещались на экране при изменении размера окна. Для основного списка я использую FlatList, и каждый отдельный элемент - это отдельный компонент.

Для этого я подписался на события resize и fullscreenchange, используя метод window.addEventLister, но все еще не могу изменить размер во многих случаях, например, при выходе из полноэкранного режима macOS или при входе в него.

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

Фрагмент кода по запросу:

Плоский список просмотров: 

export class ChatListItem extends React.Component {

   componentDidMount = () => {
       window.addEventListener("resize", this.forceUpdate);
       window.addEventListener("fullscreenchange", this.forceUpdate);
       //Is there anything wrong with doing it the above way?   
   };

   componentWillUnmount = () => {
       window.removeEventListener("resize", this.forceUpdate);
       window.removeEventListener("fullscreenchange", this.forceUpdate);
   };

   render = () => {
       //My Views which take size using flex:1 / window width and height
   };
}

Однако на том же экране есть поле ввода (которое я по какой-то причине превратил в Component), и его можно изменить с помощью той же логики: 

export class ChatInputBox extends React.Component {

   componentDidMount = () => {
       window.addEventListener("resize", this.forceUpdate);
       window.addEventListener("fullscreenchange", this.forceUpdate);
   };

   componentWillUnmount = () => {
       window.removeEventListener("resize", this.forceUpdate);
       window.removeEventListener("fullscreenchange", this.forceUpdate);
   };

   render = () => {
       //My Views which take size using flex:1 / window width and height
   };
}

1 Ответ

1 голос
/ 23 мая 2019

Ниже приведен компонент Box, который прослушивает изменение размера экрана. 

class Box extends React.Component{
     state = {
         width : window.innerWidth
         height : window.innerHeight
     }

     onResize = () => this.setState({width: window.innerWidth, height: window.innerHeight})

     componentDidMount(){
         window.addEventListener('resize', this.onResize)
     }

     componentWillUnmount(){
         window.removeEventListener('resize', this.onResize)
     }  
    render(){
        const { width, height } = this.state 
        return(
            <div 
                style={{width, height, backgroundColor: 'red}}
            />
        )
    }
}
...