javascript - How to get the value of react component - AceEditor - Stack Overflow

admin管理员组

文章数量:1289638

I am facing the following issue while using AceEditor react ponent

I am using AceEditor as user input, after user enters code, he(she) presses the Run button. (see the picture) How do I extract the text that users enters from AceEditor ponent ?

I am facing the following issue while using AceEditor react ponent https://github./securingsincity/react-ace

I am using AceEditor as user input, after user enters code, he(she) presses the Run button. (see the picture) How do I extract the text that users enters from AceEditor ponent ?

• javascript
• reactjs
• ace-editor

Share Improve this question Follow asked Aug 23, 2016 at 17:57 newprintnewprint 7,0901414 gold badges7272 silver badges115115 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 4

It's not necessary to use onChange.

<AceEditor ref="aceEditor" />

this.refs.aceEditor.editor.getValue()

You need to subscribe to the onChange event (explained in the docs) and store the value passed into the callback somewhere, perhaps in the ponent's state if the Run button is on the same page. Then, when user clicks the button just retrieve it via this.state.xxx

With the latest React v16.12+ this.refName.current.editor.getValue() works to get string value which can be parsed using JSON.parse.

Ref should be instantiated as:

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

and passed to AceEditor ponent:

     <AceEditor
        ref={this.refName}
     />

AceEditor provides an onChange event which you can use to retrieve the current content of the editor whenever the user changes it and then store the value in your own data store or your ponent's state.

This way, you are able to retrieve the value whenever you need it.

More about the editor's properties.

The readme also provides an example, demostrating its usage.

You need to bind this state to the onchange function in constructor of class.It worked for me.

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's Onchange is

onChange = {
   this.onChange
}

本文标签： javascriptHow to get the value of react componentAceEditorStack Overflow