javascript – 在React中从父组件到子组件共享状态
作者:互联网
我遇到了将父组件的状态绑定到子状态的问题.看一下代码:
父组件:
class ParentForm extends React.Component {
constructor(){
super();
this.state = {
showDialog: false
};
}
toggleDialog() {
this.setState({showDialog: !this.state.showDialog});
}
return (
<div >
<Button color='primary' onClick={() => this.toggleDialog()}></Button>
<MyDialog open={this.state.showDialog}/>
</div>
);
}
子组件:
export default class MyDialog extends Component {
constructor(props){
super(props);
this.state = {
open: this.props.open
};
}
handleRequestClose = () => {
this.setState({ open: false });
};
render() {
return (
<div>
<Dialog
fullScreen
open={this.state.open}
onRequestClose={() => this.handleRequestClose()}
transition={<Slide direction="up" />}
>
<DialogTitle>{'Title'}</DialogTitle>
<DialogContent>
<DialogContentText>
This is my dialog
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={() => this.handleRequestClose()} color="primary">Close</Button>
</DialogActions>
</Dialog>
</div>
);
}
}
在Parent Component中,如果我将state.showDialog属性设为true,则在页面加载时将打开该对话框.但是一旦我关闭它一次,我再也无法打开它了.如果我将其设置为false,则在页面加载时不会加载,即使单击父组件上的按钮,也无法打开对话框.提前感谢您抽出宝贵时间提供帮助.
解决方法:
由于您是基于父级设置本地状态,因此您需要在v16.3.0之前使用componentWillReceiveProps或之后使用getDerivedStateFromProps / memoization / key修改,因为您的状态仅在第一次设置,之后从未设置.但是,您甚至不需要MyDialog组件中的本地状态,您可以只使用Props并从子组件传递到父组件.
亲
class ParentForm extends React.Component {
constructor(){
super();
this.state = {
showDialog: false
};
}
toggleDialog() {
this.setState({showDialog: !this.state.showDialog});
}
closeDialog() {
this.setState({showDialog: false})
}
return (
<div >
<Button color='primary' onClick={ this.toggleDialog}></Button>
<MyDialog open={this.state.showDialog} closeDialog={this.closeDialog}/>
</div>
);
}
MyDialog(小孩)
export default class MyDialog extends Component {
constructor(props){
super(props);
}
render() {
return (
<div>
<Dialog fullScreen open={this.props.open} onRequestClose={this.props.closeDialog} transition={<Slide direction="up" />}>
<DialogTitle>{'Title'}</DialogTitle>
<DialogContent>
<DialogContentText>
This is my dialog
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={this.props.closeDialog} color="primary">Close</Button>
</DialogActions>
</Dialog>
</div>
);
}
}
标签:javascript,reactjs,material-ui,react-redux 来源: https://codeday.me/bug/20190724/1522899.html