无法从嵌入的表单元素调用onSubmit函数

Question

使用Meteor作为后端，使用MongoDB作为数据库，我想更新现有文档。我想在页面加载时显示input / textarea字段的现有值，因此可以在编辑之前看到它们。

以下代码不起作用的原因是，我认为，因为有两个return函数被调用，我将表单嵌入其中。我需要在下面的函数中包含form，因为我想将现有值显示为输入字段的值。

{this.data.theActionToUpd.map(function (act) {

因此，我们无法使用updateItem()直接调用onsubmit={this.updateItem}函数。

那么处理这个问题的正确方法是什么？

EditAction = React.createClass({
  mixins: [ReactMeteorData],
  getMeteorData: function() {
    var id = this.props.params.id;
    return {
      theActionToUpd: MyActions.find({
        '_id': id
      }).fetch()
    };  
  },

  updateItem: function(e) {
    e.preventDefault();
    var title = React.findDOMNode(this.refs.actionTitleUpd).value;

    MyActions.update({$set: {
      'title': title
    }});
    console.log(id);
  },

  render: function () {
    return (
      <div>
          {this.data.theActionToUpd.map(function (act) {
            return  (
            <form onSubmit={this.updateItem} key={act._id}>
              <input type="text" ref="actionTitleUpd" defaultValue={`${act.title}`} />
              <button type="submit">Update Action</button>
            </form>
          )
        })}
      </div>

    ); 
  }

});