使用AceEditor
反应组件https://github.com/securingsincity/react-ace
我使用AceEditor
作为用户输入,在用户输入代码后,他(她)按下Run
按钮。 (参见图片)如何从AceEditor
组件中提取用户输入的文本?
答案 0 :(得分:2)
您需要订阅onChange
事件(在文档中说明)并将传递到回调中的值存储在某处,如果Run
按钮位于this.state.xxx
按钮上,则可能在component's state中同一页。然后,当用户点击该按钮时,只需通过display
答案 1 :(得分:1)
AceEditor提供 onChange
事件,您可以使用该事件在用户更改时检索编辑器的当前内容,然后将值存储在您自己的数据存储或组件的状态中
这样,您就可以在需要时检索该值。
More about the editor's properties
自述文件还提供an example,说明其用法。
答案 2 :(得分:1)
没有必要使用onChange。
<AceEditor ref="aceEditor" />
this.refs.aceEditor.editor.getValue()
答案 3 :(得分:0)
您需要将此状态绑定到类的构造函数中的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
}
答案 4 :(得分:0)
使用最新的React v16.12 +,this.refName.current.editor.getValue()
可以获取可以使用JSON.parse
进行解析的字符串值。
Ref应实例化为:
constructor(props) {
super(props);
this.refName = React.createRef();
}
并传递给AceEditor组件:
<AceEditor
ref={this.refName}
/>