テキストを更新していません（.getDOMNode（）の問題）

Question

Reactを使用してMarkdownプレビューアを作成し、何が使用されたかを理解しようとしていますhereテキストの直後にライブプレビューで正しいボックスを更新します左に変更されます。彼らは、一番下にこのコードを持っている：

var RawInput = React.createClass({ 
    update:function(){ 
     var modifiedValue=this.refs.inputValue.getDOMNode().value; 
     this.props.updateValue(modifiedValue); 
    }, 
    render:function(){ 
     return (<textarea rows="22" type="text" ref="inputValue" value={this.props.value} onChange={this.update} className="form-control" />) 
    } 
}); 

私は私のコードでこれを実装する：

const InputText = React.createClass ({ 
    update() { 
     let newValue = this.refs.inputValue.getDOMNode().value; 
     this.props.updateValue(newValue); 
    }, 
    render() { 
     return (
      <div> 
       <textarea 
        id="input-text" 
        rows="18" 
        type="text" 
        ref="inputValue" 
        value={this.props.value} 
        onChange={this.update} 
        /> 
      </div> 
     ); 
    } 
}); 

アプリがそこにはライブプレビューはありませんし、右側のテキストが更新されないことを除いて正常に動作します。コンソールで私はこのエラーを受け取ります：this.refs.inputValue.getDOMNode is not a function。

import React from 'react'; 
import Banner from './components/Banner.jsx'; 
import ContainerHeader from './components/ContainerHeader.jsx'; 
import marked from 'marked'; 

const App = React.createClass ({ 
    updateValue(newValue) { 
     this.setState ({ 
      value: newValue 
     }) 
    }, 
    getInitialState() { 
     return { 
      value: 'Heading\n=======\n\nSub-heading\n-----------\n \n### Another deeper heading\n \nParagraphs are separated\nby a blank line.\n\nLeave 2 spaces at the end of a line to do a \nline break\n\nText attributes *italic*, **bold**, \n`monospace`, ~~strikethrough~~ .\n\nShopping list:\n\n * apples\n * oranges\n * pears\n\nNumbered list:\n\n 1. apples\n 2. oranges\n 3. pears\n' 
     } 
    }, 
    markup(value) { 
     return {__html: value} 
    }, 
    render() { 
     return (
      <div> 
      <Banner /> 
      <div className="container"> 
       <div className="row"> 
        <div className="col-xs-12 col-sm-6"> 
         <ContainerHeader text="I N P U T" /> 
         <InputText 
          value={this.state.value} 
          updateValue={this.updateValue} /> 
        </div> 
        <div className="col-xs-12 col-sm-6"> 
         <ContainerHeader text="O U T P U T" /> 
         <div id="output-text"> 
          <span dangerouslySetInnerHTML={this.markup(marked(this.state.value))}></span> 
         </div> 
        </div> 
       </div> 
      </div> 
      </div> 
    ); 
    } 
}); 

const InputText = React.createClass ({ 
    update() { 
     let newValue = this.refs.inputValue.getDOMNode().value; 
     this.props.updateValue(newValue); 
    }, 
    render() { 
     return (
      <div> 
       <textarea 
        id="input-text" 
        rows="18" 
        type="text" 
        ref="inputValue" 
        value={this.props.value} 
        onChange={this.update} 
        /> 
      </div> 
     ); 
    } 
}); 

export default App; 

これを解決する上の任意のヘルプを歓迎し、感謝：ここ

は完全なコードです！

Answer 1

version 15.*は、this.refs.inputValueはDOMElementを指しますので、使用する必要はありません。getDOMNode;あなたはupdateonChange内部イベントを呼び出すよう

this.refs.inputValue.value 

しかし、私はこのケースでは、あなたが使用refsを必要としないと思う、あなたはeventオブジェクトから（textarea参照）targetを取得し、targetからvalue

を得ることができます

update(e) { 
    this.props.updateValue(e.target.value); 
}, 

Answer 2

あなたが実際に必要としないthis.refs.inputValue

update(e) { 
    this.props.updateValue(e.target.value); 
}, 

Answer 3

この例では、1つの結合モジュールであるReact v0.14.xを使用しています。

React v15（0.15、ただしメジャーとして使用するように変更）から、メソッドとクラスはReactとReactDOMの2つのモジュールに分割されました。

ReactDOM.findDOMNode(component)をインポートして使用する必要があります。そのドキュメントはhereです。