親コンポーネントからonchangeハンドラを呼び出した後に、子から親にイベント引数を渡します。

Question

私はマークダウンプレビューアを作成して、ユーザーがマークダウンを入力して別のdivにレンダリングされると見ています。もともと、私は1つのReactコンポーネントを持っていて、すべて正常に動作しました。次に、私のコードをリファクタリングして、2つの子コンポーネント（入力用と出力用の2つ）を持つ親コンポーネントが1つあるようにしました。ここに私のコードは次のとおりです。

var MarkdownPreviewer = React.createClass({ 
    getInitialState: function(){ 
    return { 
     input: '' 
    } 
    }, 
    handleInput: function(event){ 
    this.setState({input: event.target.value}); 
    }, 
    render: function(){ 
    return(
     <div> 
     <Input setInputState = {this.handleInput}/> 
     <Output userInput={this.state.input}/> 
     </div> 
    ); 
    } 
}); 

var Input = React.createClass({ 
    callHandleInput: function(event){ 
    this.props.setInputState(event) 
    }, 
    render: function(){ 
    <div className="input-container"> 
     <textarea onChange={this.callHandleInput} className="form-control" placeholder="Please enter you Github flavoured markdown"></textarea> 
    </div> 
    } 
}); 

var Output = React.createClass({ 
    render: function(){ 
    <div className="output-container" dangerouslySetInnerHTML={{__html: marked(this.props.userInput)}}> 
    </div> 
    } 
}) 

React.render(<MarkdownPreviewer />, document.getElementById('container')); 

私の質問は、私は親コンポーネントで入力の状態を設定できるように、私は親コンポーネントに子コンポーネントからイベントオブジェクトを渡すことができる方法ですか？

Answer 1

入力および出力コンポーネントにreturn文がありません。