Reactjs 如何在websocket事件中使用bind（this）调用方法

我正在使用React和Websocket测试通信：

class Class extends React.Component {

  constructor(props) {
    super(props);
    this.state = {...};
    this.generateMsg= this.generateMsg.bind(this);
    this.sendMsg = this.sendMsg.bind(this);
  }

  //generate a random array
  generateMsg(n) {return [...]}

  //websocket sendMsg
  sendMsg(){
    const wsClient = new Websocket(url);
    wsClient.onopen = function(){
      wsClient.send(this.generateMsg(40));
    }
  }

  render() {
    return (
      <button onClick={this.sendMsg}>{this.state.nameList}</button>
    );
  }
}

ReactDOM.render(...);

类扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={…}；
this.generateMsg=this.generateMsg.bind（this）；
this.sendMsg=this.sendMsg.bind（this）；
}
//生成随机数组
generateMsg（n）{return[…]}
//websocket sendMsg
sendMsg（）{
const wsClient=新的Websocket（url）；
wsClient.onopen=函数（）{
wsClient.send（this.generateMsg（40））；
}
}
render（）{
返回(
{this.state.nameList}
);
}
}
ReactDOM.render（…）；

---

始终引发错误“this.generateMsg不是一个函数”，请如何在websocket事件中调用绑定（this）的方法？

使用如下箭头函数：

    wsClient.onopen = () => {
      wsClient.send(this.generateMsg(40));
    }

---

使用如下箭头函数：

    wsClient.onopen = () => {
      wsClient.send(this.generateMsg(40));
    }

---

为什么每次sendMsg调用都要创建新的WebSocket连接？您可以在

componentDidMount

上打开连接并存储它

class Class extends React.Component {
  constructor(props) {
    super(props);
    this.state = {...};
    this.generateMsg = this.generateMsg.bind(this);
    this.sendMsg = this.sendMsg.bind(this);
  }

  // open connection on mount
  componentDidMount() {
     this.socket = new WebSocket(url);
  }

  //generate a random array
  generateMsg(n) {return [...]}

  //websocket sendMsg
  sendMsg() {
    this.socket.send(this.generateMsg(40));
  }

  render() {
    return (
      <button onClick={this.sendMsg}>{this.state.nameList}</button>
    );
  }
}

类扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={…}；
this.generateMsg=this.generateMsg.bind（this）；
this.sendMsg=this.sendMsg.bind（this）；
}
//安装时打开连接
componentDidMount（）{
this.socket=新的WebSocket（url）；
}
//生成随机数组
generateMsg（n）{return[…]}
//websocket sendMsg
sendMsg（）{
this.socket.send（this.generateMsg（40））；
}
render（）{
返回(
{this.state.nameList}
);
}
}

为什么每次sendMsg调用都要创建新的WebSocket连接？您可以在

componentDidMount

上打开连接并存储它

class Class extends React.Component {
  constructor(props) {
    super(props);
    this.state = {...};
    this.generateMsg = this.generateMsg.bind(this);
    this.sendMsg = this.sendMsg.bind(this);
  }

  // open connection on mount
  componentDidMount() {
     this.socket = new WebSocket(url);
  }

  //generate a random array
  generateMsg(n) {return [...]}

  //websocket sendMsg
  sendMsg() {
    this.socket.send(this.generateMsg(40));
  }

  render() {
    return (
      <button onClick={this.sendMsg}>{this.state.nameList}</button>
    );
  }
}

类扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={…}；
this.generateMsg=this.generateMsg.bind（this）；
this.sendMsg=this.sendMsg.bind（this）；
}
//安装时打开连接
componentDidMount（）{
this.socket=新的WebSocket（url）；
}
//生成随机数组
generateMsg（n）{return[…]}
//websocket sendMsg
sendMsg（）{
this.socket.send（this.generateMsg（40））；
}
render（）{
返回(
{this.state.nameList}
);
}
}

谁在呼叫

sendMsg（）

？如果启用了babel，请尝试使用arrow函数作为类属性定义

sendMsg

。很抱歉，为了澄清问题，我隐藏了其他部分，我现在就修改我的问题。此代码似乎没有任何问题。您需要提供更多信息。对，我想我知道哪里是错误的部分。我将再次修改代码，现在您将看到问题。但我不知道如何使用websocket onopen方法绑定（此）。谁在调用

sendMsg（）

？如果启用了babel，请尝试使用arrow函数作为类属性定义

sendMsg

。很抱歉，为了澄清问题，我隐藏了其他部分，我现在就修改我的问题。此代码似乎没有任何问题。你需要提供更多的信息。对，我想我知道哪里是错误的部分。我会再次修改我的代码，现在你会看到问题。但是我不知道如何用websocket onopen方法绑定（这个）。老实说，我不知道，我仍然在尝试找出这里的生命周期，因为我的代码会无限地向ws-server发送消息。我想也许你的建议正是我需要考虑的。老实说，我不知道，我仍然在试图弄清楚这里的生命周期，因为我的代码无限地向ws-server发送消息。我想也许你的建议正是我需要考虑的。