簡單的窗口調整大小的反應

我試圖捕獲窗口高度，並將其傳遞給反應中的子組件。簡單的窗口調整大小的反應

我指的是手冊中的指南：https://facebook.github.io/react/tips/dom-event-listeners.html。

這是我的代碼是如何看，但我得到'setState不是一個函數'的錯誤。

import React from 'react'; 
import jsonp from 'jsonp'; 
import Gallery from './Gallery.jsx'; 

export const MF = 'http://auryn/modern-frontend/public_html'; 

export default class App extends React.Component { 

    constructor(props) { 
     super(props); 

     this.state = { 
      images: [ 'DSCF1176.jpg' ], 
      height: window.innerHeight+'px' 
     }; 
     var self = this; 

     // get images 
     var url = MF+'/api/posts'; 
     jsonp(url, {}, function (err, data) { 
      const blogs = data.data.blogs.map(item => {  
       return { 
        'images': item.image 
       } 
      }); 
      var images = []; 
      blogs.forEach(b => { 
       b.images.forEach(i => { 
        images.push(i.filename); 
       }); 
      }); 
      //console.log(JSON.stringify(images)); 
      //self.images = images; 
      self.setState({ images }); 
     }); 
    } 

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

    handleResize(e) { 
     this.setState({height: window.innerHeight+'px'}); 
    } 

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

    render() { 
     return (
       <Gallery images={this.state.images} height={this.state.height} /> 
     ); 
    } 
}

來源

2016-09-23 mikejw

您的handleResize函數的主體將獲得窗口上下文。你可以在構造函數中將它綁定到你的組件類：

constructor(){ 
    ... 
    this.handleResize = this.handleResize.bind(this); 
    ... 
}

來源

2016-09-24 00:33:41 FurkanO

您不能從不同的上下文訪問組件的屬性或函數（在本例中爲回調函數）。你需要綁定你的回調函數，如果您需要使用您的組件的情況下，功能應該是這樣的：

jsonp(url, {}, function (err, data) { 
    // your code 
    this.setState({ images }); 
}.bind(this));

也是一樣的handlesize功能。

來源

2016-09-24 00:19:00

謝謝艾哈邁德，但那不是setState調用失敗。這是第二個。 – mikejw

我想你應該也綁定handlesize最好在構造函數中，給它一個鏡頭 –

簡單的窗口調整大小的反應

回答

相關問題