反应未在提交处理程序中找到 <input/> 值答案

【问题标题】：React not Finding <input/> Value in Submit Handler反应未在提交处理程序中找到 <input/> 值
【发布时间】：2015-10-08 15:35:45
【问题描述】：

这是我的 React 类：

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;

它紧跟tutorial16.jshere中的代码（大于页面的一半）。

但是，行

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

将 undefined 打印到控制台。我不确定我错过了什么。 ref 似乎设置正确。渲染代码与教程中的非常相似。但在点击处理功能中，我无法像教程中那样访问input ref 的value。这是为什么呢？

【问题讨论】：

你使用的是什么版本的 React？
另外，你没有click 处理程序，你有一个submit 处理程序。
试试 console.log(note) - 我敢打赌这可行
@Mathletics React v0.12.2，更改标题，谢谢
@Titus 不，没有，你在想什么？他们应该产生相同的东西，因为这就是我将 note 设置为的内容。

标签： javascript reactjs forms reactive-programming

【解决方案1】：

在 v0.12.0 中使用 this.refs.noteToAdd.getDOMNode().value

在 v0.13.0 中使用 React.findDOMNode(this.refs.noteToAdd).value

在 v0.14.0 中使用 this.refs.noteTOAdd.value

【讨论】：

【解决方案2】：

试试；

this.refs.noteToAdd.getDOMNode().value

【讨论】：