javascript – React在提交处理程序中找不到值

这是我的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.js here中的代码(大于页面的一半).

但是,行

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

将undefined打印到控制台.我不确定我错过了什么. ref似乎设置正确.渲染代码与教程非常相似.但是在单击处理函数中,我无法像在教程中那样访问输入引用的值.为什么是这样？

解决方法:

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

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

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

标签：javascript,html-form,reactive-programming,reactjs,forms
来源： https://codeday.me/bug/20190611/1221457.html