反應：獲得父組件的狀態數據

我有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') 
    ); 
});

來源

2016-03-30 Kamyar Parastesh

UserInput是子組件 –

@Alexander我該如何解決它？ –

使用回調，盧克。這就是只有方式將數據從孩子傳遞給父母。

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

來源

2016-03-30 07:57:01 Andreyco

而當您使用回調（其中子代更新父代的狀態）時，子組件不再需要狀態。 – wintvelt

您可以將父母狀態作爲「道具」傳遞給子組件。在子組件中，您可以使用this.props.yourProp訪問道具。這是超級抽象的例子，只是爲了讓你知道如何在某些子組件中獲得父狀態。

來源

2016-12-29 08:42:43 Combine

反應：獲得父組件的狀態數據

回答

相關問題