我有两个本机组件，我无法从我的子组件中关闭模式。
ListTrips - 家长
ModalAddTrip - 子级
ListTrips.js
import ModalAddTrip from './ModalAddTrip';
....
....
this.state = {
isModalAddTripVisible: false
}
....
handleDismissModalAddTrip = () => {
this.setState({ isModalAddTripVisible: false });
};
closeModal() {
this.refs.ModalAdd.handleDismissModalAddTrip();
}
....
<ModalAddTrip
ref="ModalAdd"
isVisible={this.state.isModalAddTripVisible}
onBackDropPress={this.handleDismissModalAddTrip}
closeModal={() => this.closeModal()}
onRequestClose={this.handleDismissModalAddTrip}
/>
ModalAddTrip.js
<Modal
isVisible={isVisible}
onBackdropPress={onBackDropPress}
closeModal={this.props.child}
>
<Button
style={{ fontSize: 18, color: 'white' }}
containerStyle={{
padding: 8,
marginLeft: 70,
}}
onPress={this.closeModal}
>
打开模式后我无法关闭它。我知道它与引用/道具有关，但我已经弄乱了几个小时，但我无法到达任何地方。我正在尝试类似的事情this.props.closeModal;以及将引用切换到子组件，但它也不起作用。在 ModalAddTrip 的函数内部，但这也不起作用。
任何帮助是极大的赞赏。
谢谢
这是我用来处理模态的解决方案。
export default class MyModal extends React.Component<Props, State>{
constructor(props: Props){
super(props);
this.state = {
visible: false,
}
}
// Use this method to toggle the modal !
toggleModal = () => {
this.setState({visible: !this.state.visible});
}
render(){
return(
<Modal
isVisible={this.state.visible}
hideModalContentWhileAnimating
onBackdropPress={() => {
this.toggleModal();
}}
useNativeDriver
>
<View style={{backgroundColor: "white", padding: 5}}>
</View>
</Modal>
);
}
}
如果我按下它的后面，模态框将关闭 -> 它可以自行关闭。
现在要从父组件管理它，只需从模态中获取引用：
<MyModal
ref={ref => {
this.myModal = ref;
}}
/>
您可以从父组件切换它：
toggleMyModal = () => {
if(this.myModal){
this.myModal.toggleModal();
}
}
如果你成功了请告诉我:)
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
