reactjs event listener window.resize

一世执手 提交于 2021-01-28 12:40:44

问题


I am new to reactjs and I am trying to do a table exactly like this one in the fiddle using react : http://jsfiddle.net/hashem/crspu/555/

I created this component :

export default class Table extends Component {

    render(){
        return <table className="scroll">
            <thead>
                <tr>
                    <th>Head 1</th>
                    <th>Head 2</th>
                    <th>Head 3</th>
                    <th>Head 4</th>
                    <th>Head 5</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Content 1</td>
                    <td>Content 2</td>
                    <td>Content 3</td>
                    <td>Content 4</td>
                    <td>Content 5</td>
                </tr>
                <tr>
                    <td>Content 1</td>
                    <td>Lorem ipsum dolor sit amet.</td>
                    <td>Content 3</td>
                    <td>Content 4</td>
                    <td>Content 5</td>
                </tr>
                <tr>
                    <td>Content 1</td>
                    <td>Content 2</td>
                    <td>Content 3</td>
                    <td>Content 4</td>
                    <td>Content 5</td>
                </tr>
                <tr>
                    <td>Content 1</td>
                    <td>Content 2</td>
                    <td>Content 3</td>
                    <td>Content 4</td>
                    <td>Content 5</td>
                </tr>
                <tr>
                    <td>Content 1</td>
                    <td>Content 2</td>
                    <td>Content 3</td>
                    <td>Content 4</td>
                    <td>Content 5</td>
                </tr>
                <tr>
                    <td>Content 1</td>
                    <td>Content 2</td>
                    <td>Content 3</td>
                    <td>Content 4</td>
                    <td>Content 5</td>
                </tr>
                <tr>
                    <td>Content 1</td>
                    <td>Content 2</td>
                    <td>Content 3</td>
                    <td>Content 4</td>
                    <td>Content 5</td>
                </tr>
            </tbody>
        </table>
    }

}

Can you please help me in handling event listener of resize as shown in the example from jquery to react way ?


回答1:


Just register plain DOM events in componentWillMount() {} and remember to unbind them in componentWIllUnmount() {}.




回答2:


This will allow you to watch for resize events:

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


handleResize() {
           console.log("I've been resized!");
}


来源:https://stackoverflow.com/questions/34763730/reactjs-event-listener-window-resize

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!