Clear reactJs textarea after submit

Question

I have the following form component in a skylight dialog, after submit, if the dialog is reopened containing the form, it contains the previous submitted value. Can anyone please tell me how to stop this and clear the textarea value everytime the dialog is opened?

Here is my component:

var AddNoteForm = React.createClass({


componentDidMount: function() {

        React.findDOMNode(this.refs.notes).value = "";
},
handleSubmit: function (event) {
    event.preventDefault();

    var notes = React.findDOMNode(this.refs.notes).value;

    var details = {
        studentId: this.props.studentId,
        schoolId: this.props.schoolId,
        notes: notes
    };

    this.props.onSubmit(details);
},

render: function() {
    return (
        <form className="pure-form pure-form-aligned"
            onSubmit={this.handleSubmit}>
            <div className="pure-control-group">
                <label htmlFor="notes">Note</label>
                <textarea ref="notes" id="notes" placeholder="Note..." >
                </textarea>

            </div>
            <div className="pure-controls">
                <input type="submit" value="Save" />
            </div>
        </form>
    );
}
});

module.exports = AddNoteForm;

Answer 1

so if some one stuck in this problem , I was using uncontrolled component and it is somehow complex to clear it, I just change to controlled one and then got it :)

<form onSubmit={e => this.handleSubmit(e)}>
<textarea value={this.state.text} onChange={ e => this.handleChange(e) } />
<button>Submit Comment</button>
</form>

very important to prevent default

  handleSubmit = event => {
  event.preventDefault();    
  this.setState({ text: '' });
  };

Answer 2

Basically your form is not getting unmounted. So writing the code in componentDidMount will not make sense. So the quick fix for your problem would be to clear the textarea box after you read the value in handle submit method

handleSubmit: function (event) {
  event.preventDefault();

  var notes = this.refs.notes;

  var details = {
    studentId: this.props.studentId,
    schoolId: this.props.schoolId,
    notes: notes.value
  };

  notes.value = ""; // Unset the value
  this.props.onSubmit(details);
},