Реакция: получение данных состояния в исходном компоненте

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}); 
    }, 

Как вы можете видеть, я Тринг, чтобы обновить состояние приложения каждый раз, когда что-то типа пользователя в текстовом поле.

И тогда я хотел бы получить вставленные данные в состояние в моем родительском компоненте.

и сделать это я использовал `В родительском компоненте (Root):

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

Вы можете передать родительскому состоянию дочерний компонент в качестве «реквизита». В дочернем компоненте вы можете получить доступ к реквизитам с помощью this.props.yourProp. Это супер абстрактный пример, чтобы дать вам представление о том, как получить родительское состояние в каком-либо дочернем компоненте.