2016-03-30 18 views
0

Ich habe 2 reagieren Komponenten. in der untergeordneten Komponente habe ich eine textfield: jedes Mal, Benutzertyp etwas in der TextboxReact: Get State-Daten in der Elternkomponente

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

Wie Sie sehen, ich bin Tring Stand der Anwendung zu aktualisieren.

Und dann möchte ich eingefügt Daten in den Zustand in meiner Mutterkomponente.

und zu tun dies i `In Stammkomponente (Root) verwendet:

console.log(this.state.data); 

aber es gibt mir eine [] nur. Ich versuchte auch console.log(this.state.data.ItemTotype);, aber diesmal war es undefine.

Was soll ich tun?

paernt Komponente:

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') 
    ); 
}); 
+0

UserInput ist Kind Komponente –

+0

@Alexander wie kann ich es beheben? –

Antwort

3

Verwenden Rückrufe, Luke. Das ist die nur Möglichkeit, Daten von Kind an Eltern übergeben.

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')); 
+0

Und wenn Sie einen Rückruf verwenden (wobei das Kind den Status des Elternelements aktualisiert), benötigt die Child-Komponente keinen Status mehr. – wintvelt

0

Sie können den Elternstatus an die untergeordnete Komponente als 'Requisiten' übergeben. In der Child-Komponente können Sie mit this.props.yourProp auf die Requisiten zugreifen. Dies ist ein super abstraktes Beispiel, um Ihnen eine Idee zu geben, wie Sie den übergeordneten Status in einer untergeordneten Komponente erhalten.

Verwandte Themen