Reactjはアプリコンポーネント内の状態変化をリッスンします

Question

私はReactに比較的新しいです。私は持っているメニューコンポーネントの状態の変化を聞きたいです。私は、状態の変更をapp.jsxそのものである、アプリケーションの最高レベルにバブルアップさせる必要があります。私はイベントを聞くためにアプリでさまざまな方法を試しましたが、どれもこれまで働いていませんでした。私はそれがちょうど私が開閉しているメニューであるので、アプリでreduxを使用していないよ。この変更をアプリ全体でどのように聞くことができますか？

謝辞があります。

- ！！私の成分関数

export default class Comp extends React.Component { 

constructor(props){ 
    super(props); 
    this.toggleDropdown = this.toggleDropdown.bind(this); 
    this.state = { 
     isOpen: false 
    } 

} 

toggleDropdown =() => { 
    const toggledIsOpen = this.state.isOpen ? false : true; 

    this.setState({ 
     isOpen: toggledIsOpen 
    }); 

} 

render =() => 


    <button onClick={this.toggleDropdown}>Menu</button> 

} 

---アプリ

export default class App extends React.Component { 

constructor(props) { 
    super(props); 
} 

componentDidUpdate(prevProps, prevState) { 
    console.log('//'); 
    console.log(this.state); 
} 

render =() => 

    <span> value of state to update here</span> 
    <Comp/> 

} 

Answer 1

あなたはでそれを行うことができますコールバック：

export default class App extends React.Component { 

constructor(props) { 
    super(props); 
} 

componentDidUpdate(prevProps, prevState) { 
    console.log('//'); 
    console.log(this.state); 
} 
callBack(value) { 
    console.log(value) // "testValue" 
} 
render =() => //note: you should have single component in return -> wrap this within div, for example 

    <span> value of state to update here</span> 
    <Comp cb={this.callBack}/> 

} 


export default class Comp extends React.Component { 

constructor(props){ 
    super(props); 
    this.toggleDropdown = this.toggleDropdown.bind(this); 
    this.state = { 
     isOpen: false 
    } 

} 

toggleDropdown =() => { 
    const toggledIsOpen = this.state.isOpen ? false : true; 

    this.setState({ 
     isOpen: toggledIsOpen 
    }); 
    this.props.cb("testValue"); 

} 

render =() => 


    <button onClick={this.toggleDropdown}>Menu</button> 

} 

Answer 2

あなたはアップ状態にプリンシペリフティングを使用する必要があります。これは、2つのコンポーネント間で状態を共有するために使用されます。最も一般的な操作は、最も近い共通の祖先に移動することです。

共有状態：我々は子孫の状態を更新し、（あなたのケースで - アプリ）他の成分が変化する（またはその逆）を反映すべき

続きを読む：https://facebook.github.io/react/docs/lifting-state-up.html