Ace Editor обновляет состояние реакции - PullRequest
Новая
       15

Ace Editor обновляет состояние реакции

0 голосов
/ 13 февраля 2020

В моем приложении «Реакция» у меня есть компонент с двумя узлами, первый - это компонент редактора ace, второй - узел h1 HTML. Я также установил соединение WebSocket с wss://echo.websocket.org, которое должно вернуть то, что я только что отправил.

Чего я хотел добиться, так это в редакторе ace при изменении текстового ввода отправляется на сервер, а затем ответ от сервера визуализируется в узле h1.

В настоящее время ввод символов в редактор ace отправляется и принимается с сервера и обрабатывается узлом h1, однако отправляется и принимается только один символ ie, вы не можете введите более двух символов в редакторе 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;

Как изменить код, чтобы можно было набирать более одного символа, пока сохранить функциональность без изменений?

Спасибо.

1 Ответ

1 голос
/ 26 февраля 2020

Проблема возникает потому, что каждый раз, когда компонент обновляется, он создает новый экземпляр туза. Одним из обходных путей является изменение кода, инициализирующего редактор ace, на 

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

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

...