React：親コンポーネントの状態データを取得

Question

2つの反応コンポーネントがあります。私はtextfieldを持っている子コンポーネントで：

var React = require('react'); 
var UserInput = React.createClass({ 
    getInitialState: function() { 
    return {ItemTotype: ''}; 
    }, 


    handleUserInput: function(e){ 
    // console.log(e.target.value); 
    this.setState({ItemTotype: e.target.value}); 
    }, 

あなたが見ることができるように、私は、アプリケーションの状態にテキストボックス内のユーザーのタイプに何かするたびに更新するトリングています。

そして、親コンポーネントの状態にデータを挿入したいと思います。これを行うには

と私は親コンポーネント（ルート）で `を使用：

console.log(this.state.data); 

が、それは私だけ[]を与えます。私もconsole.log(this.state.data.ItemTotype);を試しましたが、今回はundefineでした。

どうすればよいですか？

paerntコンポーネントは次のとおりです。

define(["./Statistic","./UserInput","./RandomWords","react", "react-dom"], 
    (Statistic,UserInput,RandomWords,React, ReactDOM) => { 

     var Root = React.createClass({ 

    loadItemTypedFromServer: function() { 
     console.log("Hey"); 
     console.log(this.state.ItemTotype); 

    }, 

    getInitialState: function() { 
     return {data: []}; 
    }, 

    componentDidMount: function() { 
     this.loadItemTypedFromServer(); 
     setInterval(this.loadItemTypedFromServer, 1000); 
    }, 

     render: function() { 
      return (
      <div > 
       <h1>Welcome to our game</h1> 
       <RandomWords/> 
       <UserInput /> 
       <Statistic/> 
      </div> 
     ); 
     } 
     }); 

     ReactDOM.render(
     React.createElement(Root, null), 
     document.getElementById('content') 
    ); 
}); 

Answer 1

使用のコールバック、ルーク。それは子から親にデータを渡す方法です。

const Child = React.createClass({ 
    render() { 
    const { onChange, value } = this.props; 
    return <textarea onChange={onChange} value={value} />; 
    } 
}) 

var Parent = React.createClass({ 
    getInitialState() { 
    return {data: ''}; 
    }, 

    onChange(event) { 
    this.setState({data: event.target.value}); 
    }, 

    render() { 
    return <Child onChange={this.onChange} value={this.state.data} />; 
    } 
}); 

ReactDOM.render(<Parent />, document.getElementById('container')); 

Answer 2

子コンポーネントに親ステートを 'props'として渡すことができます。子コンポーネントでは、this.props.yourPropを使用して小道具にアクセスできます。 これは、いくつかの子コンポーネントで親状態を取得する方法を理解するための抽象的な抽象的な例です。