this.refs.something.valueは反応で未定義を返します

Question

編集をクリックすると入力バーが表示されます。保存ボタンをクリックするとユーザーの入力が得られますが、なぜ私は未定義ですか？コンソールにエラーはありません。

http://jsfiddle.net/2onzybk6/2

var App = React.createClass({ 
    getInitialState() { 
    return { 
     items : [1, 2, 3], 
     isEdit: null 
    }; 
    }, 
    renderEditForm() { 
    return (
     <div> 
     <input type="text" ref="newItem" /> 
     <button onClick={ this.saveHandler }>Save</button> 
     </div> 
    ); 
    }, 

    ItemCtrl(index) { 
    if (index != this.state.isEdit) { 
     return (
     <div className="itemCtrlWrap"> 
      <button onClick={ this.editHandler.bind(this, index) }>Edit</button> 
     </div> 
     ); 
    } 
    }, 
    editHandler(i) { 
    this.setState({ isEdit: i }); 
    }, 
    saveHandler() { 

    console.log(this.refs.newItem.value); // why is this undefined? 
    this.setState({ isEdit: null }); 
    }, 

    renderItem() { 
    return (
    this.state.items.map((item, i) => 
     <li key={ i }> {this.state.isEdit == i ? this.renderEditForm() : item} {this.ItemCtrl(i)}</li>) 
    ); 
    }, 
    render() { 
    return (
     <ul> 
     {this.renderItem()} 
     </ul> 
    ); 
    } 
}); 

Answer 1

使用しているリアクトのバージョンでは、これを実行する必要があります：最近のバージョンで

this.refs.newItem.getDOMNode().value

あなたがthis.refs.newItemを行うときに、それが実際にDOMノードを返しますが、このフィドルで使用しているバージョンでは、Reactコンポーネントオブジェクトを返します。 getDOMNode()に電話すると、実際のDOM要素が取得され、通常のDOMプロパティを呼び出すことができます。