Как вывести значение проп реагировать Ace Editor на клик? - PullRequest
Новая
       25

Как вывести значение проп реагировать Ace Editor на клик?

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

Я ищу отображение значения из редактора React Ace. Сейчас просто смотрю на console.log.

Я не уверен, как получить к нему доступ и отобразить его, когда нажата кнопка «посмотреть код».

Вот код, который я ' м в данный момент работаю над: 

import React, { Component } from "react";
import AceEditor from "react-ace";

import "ace-builds/src-noconflict/mode-javascript";
import "ace-builds/src-noconflict/theme-github";

function onChange(newValue) {
  console.log("change", newValue);
}

class Code extends Component {
  constructor(props) {
    super(props);
    this.state = { code: `console.log("Hello World")` };
  }

  runCode = () => {
    console.log(this.props.aceEditor.value);
  };

  render() {
    return (
      <>
        <AceEditor
          mode="javascript"
          theme="github"
          fontSize={16}
          value={this.state.code}
          onChange={onChange}
          name="UNIQUE_ID_OF_DIV"
          editorProps={{ $blockScrolling: true }}
        />
        <div>
          <h2>Controls:</h2>
          <button onClick={this.runCode}>see code</button>
        </div>
      </>
    );
  }
}

export default Code;

1 Ответ

0 голосов
/ 16 февраля 2020 
constructor(props) {
 super(props);
 this.state = { code: `console.log("Hello World")` };
 this.runCode = this.runCode.bind(this);
}

Вам необходимо привязать функцию runCode к вашему классу. Вы можете сделать это в своем конструкторе, как показано выше.

...