React not Finding <input/> Value in Submit Handler

Question

Here's my React class:

var React = require('bower.js').React;
var paper = require('bower.js').paper;

var NotePanel = React.createClass({
  getInitialState: function() {
    return {
      noteToAdd: ""
    };
  },
  setNoteToAdd: function(event) {
    event.preventDefault();
    var note = this.refs.noteToAdd.value;
    console.log(this.refs.noteToAdd.value);
    this.setState({
        noteToAdd: note
    });
  },
  render: function() {
    return (
      <div>
        <form onSubmit={this.setNoteToAdd}>
          <input ref="noteToAdd" type="text" />
          <input type="submit" value="Add Note" />
        </form>
      </div>
    );
  }
});

module.exports = NotePanel;

It follows closely the code in tutorial16.js here (greater than halfway down the page).

However, the line

console.log(this.refs.noteToAdd.value);

prints undefined to the console. I'm not sure what I'm missing. The ref seems to be set up properly. The render code is very similar to that of the tutorial. But in the click handling function I cannot access the value of the input ref like in the tutorial. Why is this?

Answer 1

In v0.12.0 use this.refs.noteToAdd.getDOMNode().value

In v0.13.0 use React.findDOMNode(this.refs.noteToAdd).value

In v0.14.0 use this.refs.noteTOAdd.value