CODEWITHSUNDEEP
javascriptreactjsace-editor
newprint
newprint

Reputation: 7098

How to get the value of react component - AceEditor

I am facing the following issue while using AceEditor react component https://github.com/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 component ? enter image description here

Upvotes: 2

Views: 6470

Answers (5)

halafi
halafi

Reputation: 1254

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 component:

     <AceEditor
        ref={this.refName}
     />

Upvotes: 2

Jonny Cook
Jonny Cook

Reputation: 684

It's not necessary to use onChange.

<AceEditor ref="aceEditor" />

this.refs.aceEditor.editor.getValue()

Upvotes: 4

Pankaj Goyal
Pankaj Goyal

Reputation: 1

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
}

Upvotes: 0

TimoStaudinger
TimoStaudinger

Reputation: 42530

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 component'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.

Upvotes: 1

Igorsvee
Igorsvee

Reputation: 4211

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

Upvotes: 2

Related Questions