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>

}

！--- app

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

您应该使用提升状态原则。这用于在两个组件之间共享状态。最常见的操作是将其移动到最近的共同祖先。

共享状态：当我们更新后代的状态时，另一个组件（在您的情况下 - 应用程序）应该反映更改（反之亦然）

了解详情：https://facebook.github.io/react/docs/lifting-state-up.html

Answer 2

您可以使用回调来执行此操作：

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>

}

Reactjs监听app组件中的状态更改

2 个答案: