React Modifying Textarea Values

Question

I am working on a project which is basically notepad. I am having problems though updating the \'s value when an ajax call is made. I tried setting the textarea\ <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5408099190056760" data-ad-slot="7305827575" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="fly-panel detail-box" id="flyReply"> <fieldset class="layui-elem-field layui-field-title" style="text-align: center;"> <legend>2条回答</legend> </fieldset> <ul class="jieda" id="jieda"> <li data-id="111" class="jieda-daan"> <a name="item-1111111111"></a> <div class="detail-about detail-about-reply"> <a class="fly-avatar" href=""> <img src="https://www.e-learn.cn/qa/data/avatar/000/00/00/small_000000022.jpg" alt=" 误落风尘 "> </a> <div class="fly-detail-user"> <a href="" class="fly-link"> <cite> 误落风尘</cite> </a> <span>(楼主)</span> </div> <div class="detail-hits"> <span>2021-02-02 06:25</span> </div> </div> <div class="detail-body jieda-body photos"> <p> <p>As a newbie in React world, I came across a similar issues where I <code>could not edit</code> the textarea and <code>struggled</code> with binding. It's worth knowing about <code>controlled</code> and <code>uncontrolled</code> elements when it comes to react. </p> <p>The value of the following <code>uncontrolled textarea</code> cannot be changed because of <code>value</code> </p> <pre><code> <textarea type="text" value="some value" onChange={(event) => this.handleOnChange(event)}>

The value of the following uncontrolled textarea can be changed because of use of defaultValue or no value attribute

 this.handleOnChange(event)}>

 this.handleOnChange(event)}>

The value of the following controlled textarea can be changed because of how value is mapped to a state as well as the onChange event listener

 this.handleOnChange(event)}>

Here is my solution using different syntax. I prefer the auto-bind than manual binding however, if I were to not use {(event) => this.onXXXX(event)} then that would cause the content of textarea to be not editable OR the event.preventDefault() does not work as expected. Still a lot to learn I suppose.

class Editor extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      textareaValue: ''
    }
  }
  handleOnChange(event) {
    this.setState({
      textareaValue: event.target.value
    })
  }
  handleOnSubmit(event) {
    event.preventDefault();
    this.setState({
      textareaValue: this.state.textareaValue + ' [Saved on ' + (new Date()).toLocaleString() + ']'
    })
  }
  render() {
    return 

        
 this.handleOnSubmit(event)}>
           this.handleOnChange(event)}>
          

          
        
      
  }
}
ReactDOM.render(, document.getElementById("content"));

The versions of libraries are

"babel-cli": "6.24.1",
"babel-preset-react": "6.24.1"
"React & ReactDOM v15.5.4"