如何获取react组件的值 - AceEditor

Question

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

时遇到以下问题

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

Answer 1

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

检索它

Answer 2

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

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

More about the editor's properties.

自述文件还提供了an example，演示了它的用法。

Answer 3

您需要将此状态绑定到为我工作的 class.It 的构造函数中的 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 4

没有必要使用onChange。

<AceEditor ref="aceEditor" />

this.refs.aceEditor.editor.getValue()

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}
     />

如何获取react组件的值 - AceEditor

How to get the value of react component - AceEditor

javascript

ace-editor

reactjs