Ace 编辑器更新反应状态

Question

在我的 React 应用程序中，我有一个包含两个节点的组件，第一个是 ace 编辑器组件，第二个是 h1 HTML 节点。我还建立了一个到 wss://echo.websocket.org 的 WebSocket 连接，这应该 return 我刚刚发送的内容。

我想要实现的是在 ace 编辑器中更改文本输入发送到服务器然后服务器的响应在 h1 节点中呈现。

目前，输入到ace编辑器的字符正在从服务器发送和接收，并呈现给h1节点，但是只发送和接收一个字符，即您不能在ace编辑器中输入两个以上的字符。

尝试调试后，我发现当 componentDidMount 中应该更新 h1 的设置状态被删除时，您可以键入多个字符的 ace 编辑器，但是，我需要在h1 标签。

代码如下：


import React, { Component } from "react";
import AceEditor from "react-ace";
import "ace-builds/src-noconflict/mode-csharp";

class MirrorText extends Component {
  constructor(props) {
    super(props);
    this.state = {
      ws: '',
      dataFromServer: "", 
      };
  }



  onChange = (newValue) => {
    var obj = { action: "plan", payload: newValue };
    // Converting JS object to JSON string.
    var json = JSON.stringify(obj);
    try {

      this.state.ws.send(json) //send data to the server
    } catch (error) {
      console.log("error"+error) // catch error
    }

  }
  componentDidMount() {


    this.state.ws = new WebSocket("wss://echo.websocket.org")
    this.state.ws.onopen = () => {
      // on connecting, do nothing but log it to the console
      console.log('connected')
    }

    this.state.ws.onmessage = evt => {
      // listen to data sent from the websocket server
      // const message = JSON.parse(evt.data)

      this.setState({ dataFromServer: evt.data })
      console.log("message" + evt.data)
    }

    this.state.ws.onclose = () => {
      console.log('disconnected')

    }
  }



  render() {
    return (
      <div className="row" style={{ height: `99%`, width: `100%`, marginLeft: `5px`, marginRight: `2px` }}>
        <div
          className="col-xl-6 col-lg-6 col-sm-6"
          style={{ margin: 0, padding: 0 }}
        >
          <AceEditor
            mode="csharp"
            theme="twilight"
            style={{
              width: `100%`,
              height: `100%`,
              padding: `0`,
              margin: `0`
            }}
            onChange={this.onChange}
            setOptions={{
              showGutter: true,
              enableBasicAutocompletion: true,
              enableSnippets: true,
              enableLiveAutocompletion: true,
              value: this.state.rawModel
            }}
            name="1"
            editorProps={{
              $blockScrolling: true
            }}
          />
        </div>

        <div
          className="col-xl-6 col-lg-6 col-sm-6"
          style={{
            marginLeft: `0`,
          }}
        >
          <h1>{this.state.dataFromServer}</h1>

        </div>
      </div>
    );
  }
}



export default MirrorText;

如何更改代码以在保持功能不变的情况下能够键入多个字符？

谢谢。

Answer 1

出现这个问题是因为每次组件更新时它都会创建一个新的 ace 实例。一种解决方法是将初始化 ace 编辑器的代码更改为

{this.editor || (this.editor = <AceEditor 
...
 />)}

https://codesandbox.io/s/beautiful-cray-2eipo

Ace 编辑器更新反应状态

Ace Editor updating react state

ace-editor

reactjs