我对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/>
}
答案 0 :(得分:3)
您应该使用提升状态原则。这用于在两个组件之间共享状态。最常见的操作是将其移动到最近的共同祖先。
共享状态:当我们更新后代的状态时,另一个组件(在您的情况下 - 应用程序)应该反映更改(反之亦然)
了解详情:https://facebook.github.io/react/docs/lifting-state-up.html
答案 1 :(得分:3)
您可以使用回调来执行此操作:
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>
}