[英]React Native: How to call a function from another component
I am making a simple app to practice using modals.我正在制作一个简单的应用程序来练习使用模态。 I have my modal component in a separate file from App.js.我的模态组件位于 App.js 的单独文件中。 I have a button inside the modal and outside of the modal that should toggle the visibility of the modal.我在模式内部和模式外部有一个按钮,应该切换模式的可见性。 To handle the visibility toggle, I have a method in App.js, setVisibility, that takes in a boolean arg and sets the isVisibility state.为了处理可见性切换,我在 App.js 中有一个方法 setVisibility,它接受 boolean arg 并设置 isVisibility state。 When I had the modal component defined within App.js earlier everything was working fine, but I'm not sure about accessing and setting the state of a component from another file.当我早些时候在 App.js 中定义模态组件时,一切正常,但我不确定从另一个文件访问和设置组件的 state。
My modal component:我的模态组件:
import React, { Component } from "react";
import { View, Modal, TouchableHighlight, Text } from 'react-native';
export default class AppModal extends Component {
constructor(props) {
super(props);
this.state = {
isVisible: this.props.isVisible
}
this.toggleVisibility = this.toggleVisibility.bind(this);
}
toggleVisibility(show) {
this.props.setVisibility(show);
}
render() {
return (
<View>
<Modal
animationType='slide'
visible={this.state.isVisible}
onRequestClose={() => this.toggleVisibility(false)}
>
<View style={{alignItems: 'center', justifyContent: 'center', flex: 1}}>
<Text>Inside the modal</Text>
<TouchableHighlight style={{padding: 10}} onPress={() => this.toggleVisibility(false)} >
<Text>Press me</Text>
</TouchableHighlight>
</View>
</Modal>
</View>
)
}
}
My app.js:我的 app.js:
import React, { Component } from 'react';
import { Text, View, TouchableHighlight } from 'react-native';
import AppModal from './AppModal'
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
isVisible: false
}
this.setVisibility = this.setVisibility.bind(this);
}
setVisibility(show) {
this.setState({
isVisible: show
})
}
render() {
return (
<View style={{flex: 1}}>
<AppModal toggle={this.setVisibility} isVisible={this.state.isVisible} />
<View style={{justifyContent: 'center', alignItems: 'center', flex: 1}}>
<Text>Outside of the modal</Text>
<TouchableHighlight style={{padding: 10}} onPress={() => {this.setVisibility(true); console.log(this.state);}} >
<Text>Press me</Text>
</TouchableHighlight>
</View>
</View>
)
}
}
Now I get an error when I press the button in the modal which tells me that 'this.props.setVisibility is not a function'.现在,当我按下模式中的按钮时出现错误,告诉我“this.props.setVisibility 不是函数”。
Please let me know if I can explain my question better.如果我能更好地解释我的问题,请告诉我。 Thank you in advance!先感谢您!
You send the toggling callback method as toggle={this.setVisibility}
, not setVisibility={this.setVisibility}
, so your callback must be:您将切换回调方法发送为toggle={this.setVisibility}
,而不是setVisibility={this.setVisibility}
,因此您的回调必须是:
toggleVisibility(show) {
this.props.toggle(show);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.