如何获得反应成分的价值 - AceEditor

Question

使用AceEditor反应组件https://github.com/securingsincity/react-ace

时，我遇到以下问题

我使用AceEditor作为用户输入，在用户输入代码后，他（她）按下Run按钮。 （参见图片）如何从AceEditor组件中提取用户输入的文本？

Answer 1

您需要订阅onChange事件（在文档中说明）并将传递到回调中的值存储在某处，如果Run按钮位于this.state.xxx按钮上，则可能在component's state中同一页。然后，当用户点击该按钮时，只需通过display

检索它

Answer 2

AceEditor提供 onChange事件，您可以使用该事件在用户更改时检索编辑器的当前内容，然后将值存储在您自己的数据存储或组件的状态中

这样，您就可以在需要时检索该值。

More about the editor's properties

自述文件还提供an example，说明其用法。

Answer 3

没有必要使用onChange。

<AceEditor ref="aceEditor" />

this.refs.aceEditor.editor.getValue()

Answer 4

您需要将此状态绑定到类的构造函数中的onchange函数上。它对我有用。

constructor(props){
    super(props);
    this.state = {code:"code"};
    this.onChange = this.onChange.bind(this);
}

onChange(newValue) {
    this.state.code = newValue;
    alert(this.state.code);
}

Ace Editor的Onchange是

onChange = {
   this.onChange
}

Answer 5

使用最新的React v16.12 +，this.refName.current.editor.getValue()可以获取可以使用JSON.parse进行解析的字符串值。

Ref应实例化为：

 constructor(props) {
    super(props);
    this.refName = React.createRef();
  }

并传递给AceEditor组件：

     <AceEditor
        ref={this.refName}
     />