'React: Getting the value of text inside a contentEditable div

I am using a contentEditable div and want to get the text inside it when a submit is called. I tried this.refs.textarea.value.trim() but that doesn't seem to work. My code is as follows in the render return

<div><form onSubmit={this.handleSubmit} id="noter-save-form" method="POST">

<div id="noter-text-area" contentEditable="true" ref="textarea">{value}</div>

and the handleSubmit function.

handleSubmit: function(e) { 
  e.preventDefault();
  var text = this.refs.textarea.value.trim();
  alert(text);
  this.saveFile(text);
},

Thanks for the help. I am just looking to replace the text variable with what is actually inside the editable div.

htmlreactjs


Solution 1:[1]

if it's a div it doesn't matter if it's editable and should be this.refs.textarea.innerHTML and if you just want text this.refs.textarea.innerText

Solution 2:[2]

This works for me! hope this help

 handleSubmit: function(e) { 
      e.preventDefault();
      let text = e.currentTarget.textContent;
      alert(text);
      this.saveFile(text);
    },

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 David Zorychta
Solution 2 jlee

Related Questions