如何調用與綁定方法（這）一個WebSocket的事件

Question

我使用的反應，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(...); 

總是引發ERR「this.generateMsg不是一個函數」，如何調用方法綁定（這）在一個websocket事件內請嗎？

Answer 1

使用箭頭功能是這樣的：

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

Answer 2

爲什麼你創建的每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> 
    ); 
    } 
}