我正在尝试显示带有按钮的模态屏幕,当我按下按钮时,将出现模态。负责它的变量是modalVisible
及其变量状态。但是,如果我的按钮不在屏幕Profile
的同一个类中,则我无法更改变量,最后我不知道该怎么做:
class Carrousel extends React.Component {
render () {
return (
<Button
title= 'press me to show up'
onPress= {() => this.props.visible = true}
/>
);
}
}
export default class Profile extends React.Component {
constructor(props) {
super(props);
this.state = {
modalVisible: true,
};
}
render() {
return (
<View>
<Modal
visible = {this.state.modalVisible}>
</Modal>
<Carrousel visible = {this.state.modalVisible}/>
</View>
);
}
}
是否可以在另一个类中更改此变量modalVisible
?还是有另一种方法可以让我在另一个课程中用按钮显示模式?
* carrousel类是另一个文件Carrousel.js
。
答案 0 :(得分:1)
您必须将函数设置为prop,以更改父组件上的状态。我没有尝试过,但是应该是这样的:
class Carrousel extends React.Component {
render () {
return (
<Button
title= 'press me to show up'
onPress= {() => this.props.setVisible()}
/>
);
}
}
export default class Profile extends React.Component {
constructor(props) {
super(props);
this.state = {
modalVisible: false,
};
this.setVisible = this.setVisible.bind(this);
}
setVisible() {
this.setState({
modalVisible: true,
})
}
render() {
return (
<View>
<Modal
visible = {this.state.modalVisible}>
</Modal>
<Carrousel setVisible={this.setVisible}/>
</View>
);
}
}