Question

我有这样的反应组件：

import React, { Component } from 'react'
import { Sidebar, Segment, Button, Menu, Image, Icon, Header } from 'semantic-ui-react'

export default class Footer extends Component {

    constructor(props) {
        super(props)
        this.state = {
            visible: false
        }
        this.handleClick = this.handleClick.bind(this);
        this.handleClick();
    }


    handleClick() {

        this.props.socket.on('connect', function () {
            console.log("PRINT this.state.visible");
            console.log('Connected');
        });

        this.props.socket.on('disconnect', function () {
            console.log('Disconnected');
        });
    }

    render() {
        return (
            <div className='create-task-section'>
                "HELLO"
            </div>
        )
    }
}

我正在使用websocket io。在方法this.props.socket.on中，我想要打印

this.state = { visible: false }

但是当我打印这个变量时，我会得到一个不确定的错误。如何在this.state等匿名方法中读取/更改/更新this.props.socket.on值？

感谢您的帮助！

Answer 1

绑定这个＆＃39;。

this.props.socket.on('connect', function () {
            console.log("PRINT this.state.visible");
            console.log('Connected');
        }.bind(this));

更改状态变量使用＆＃39; this.setState（{visible：false}）＆＃39;永远不会用this.state.visible变异状态，因为它不会工作。事件处理也应该在componentDidMount方法中完成，而不是在handleClick上完成，因为它将无法工作直到用户点击。

Answer 2

您应该使用箭头功能（ES6）。

this.props.socket.on('connect', () => {
  console.log("PRINT this.state.visible");
  console.log('Connected');
});

你应该这样做，因为你的匿名函数有自己的上下文，在这种情况下引用this。箭头函数不会创建新的上下文，因此在这种情况下this将是组件this。

如何在组件中使用react的匿名方法中使用state

2 个答案: