无法从输入React获取值(react-rails gem)

Question

我正在使用React和react-rails gem。

var MeventShow = createReactClass({

getInitialState() {
 return {editable: false }
},

handleDelete(id) {
  this.props.handleDelete(id)
},

handleEdit() {
  var titler  = this._title.value;
  console.log('in handleEdit', this.state.editable, name);
  this.setState({editable: !this.state.editable})
},

render() {
var mevent = this.props.mevent
var title = this.state.editable ? <input type='text' id="inputShowTitle"     ref={(c) => this._title = c} defaultValue={mevent.title} /> : <h4 id="showTitle" onDoubleClick={this.handleEdit}>{mevent.title}</h4>
return (
  <div className="row">
    {title}
  </div>  
)
}
})

当我尝试运行handleEdit()时，我得到类似于this._title is undefined的错误。它出现在handleEdit()的第一行。如果我在render方法中使用没有条件部分的相同代码，它工作得很好。我做错了什么？

Answer 1

可以在<input />渲染后(在setState回调中)获取该值，如下所示：

var MeventShow = createReactClass({

  getInitialState() {
    return {editable: false }
  },

  handleDelete(id) {
    this.props.handleDelete(id)
  },

  handleEdit() {
    this.setState({editable: !this.state.editable}, () => {
      var titler  = this._title.value;
      console.log('in handleEdit', this.state.editable, name);
    })
  },

  render() {
    var mevent = this.props.mevent
    var title = this.state.editable ? <input type='text' id="inputShowTitle"     ref={(c) => this._title = c} defaultValue={mevent.title} /> : <h4 id="showTitle" onDoubleClick={this.handleEdit}>{mevent.title}</h4>
    return (
        <div className="row">
          {title}
        </div>
    )
  }
})