Изменить значение в реагировать JS на изменение размера окна - PullRequest
Новая
       10

Изменить значение в реагировать JS на изменение размера окна

0 голосов
/ 27 августа 2018

Я строю фотогалерею в Реакции. Очевидно, что он должен быть отзывчивым, и я решил эту проблему, установив значения, как в методе рендеринга компонента: 

let thumbWidth = window.innerWidth >= 480 ? 75 : 100;

Проблема в том, что мне нужно изменить значение const при изменении размера окна. Моей первой попыткой было создать такую ​​функцию и связать ее в конструкторе: 

getThumbWidth = (vpWidth) => {
    if(vpWidth >= 480 ) {
        this.setState({thumbSize: 120}); 
     } else {
        this.setState({thumbSize: 50}); 
     }
}

Это работало с точки зрения установки начального значения переменной, но как мне вызвать функцию, когда размер окна изменяется?

Попытался добавить функцию изменения размера: 

resize = () => this.getThumbWidth()

... и затем изменив getThumbWidth, чтобы он устанавливал значение в состоянии компонента - идея заключается в том, что при обновлении состояния компонент автоматически перерисовывает: 

getThumbWidth = (vpWidth) => {
    if(vpWidth >= 480 ) {
        this.setState({thumbSize: 120}); 
     } else {
        this.setState({thumbSize: 50}); 
     }
}

А затем вызывать его с помощью методов жизненного цикла, как предлагалось в нескольких других решениях, но прослушиватель событий, похоже, не запускается: 

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

componentWillUnmount() {
    window.removeEventListener('resize', this.resize)
}

Все еще не работает, хотя ... есть идеи?

Ответы [ 3 ]

0 голосов
/ 27 августа 2018

U можете добавить атрибут ref в контейнер вашего компонента: 

return (
    <div
       className={mainClass}
       ref={(elem) => { this.elem = elem; }}
    >
        your gallery here
   </div>

Тогда в вашем componentDidMount у вас будет доступ ко всем событиям, связанным с вашим контейнером. Затем вы можете вызвать вашу функцию в зависимости от изменений этих событий. Например: 

componentDidMount() {
   const parent = this.elem.parentNode;
       if (parent.scrollHeight > parent.clientHeight) {
         parent.onscroll = (() => this.yourMethod(parent));
       } 
}
0 голосов
/ 27 августа 2018

@ Jousi, попробуйте это ниже, код прекрасно работает при изменении размера окна 

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      windowSize: "",
      thumbWidth: 75
    };
  }

  handleResize = e => {
    const windowSize = window.innerWidth;
    const thumbWidth = (windowSize >= 480 && 100) || 75;
    this.setState(prevState => {
      return {
        windowSize,
        thumbWidth
      };
    });
  };

  componentDidMount() {
    window.addEventListener("resize", this.handleResize);
  }

  componentWillUnmount() {
    window.removeEventListener("resize", this.handleResize);
  }

  render() {
    return (
      <div>
        <h2>window size: {this.state.windowSize}</h2>
        <h3>thumbnail width: {this.state.thumbWidth}</h3>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));
0 голосов
/ 27 августа 2018

Я думаю, вам может понадобиться инициализировать функцию this.resize.

вроде так: window.removeEventListener('resize', this.resize())

...