我在我的项目中使用react-navigation,我需要在右侧标题按钮点击时切换模态。当我将setState设置为true时,我得到了未定义。
码:
import React, { Component } from 'react';
import { View, Text } from 'react-native';
import { ToggleDrawer, ToggleAdditional } from '../../utils';
import { AdditionalModal } from '../../components';
class Settings extends Component {
static navigationOptions = ({ navigation }) => {
const { params = {} } = navigation.state;
return {
headerTitle: 'Profile',
headerLeft: <ToggleDrawer pressHandler={() => navigation.openDrawer()} />,
headerRight: (
<ToggleAdditional pressHandler={() => params.handleAdditionalModal()} />
)
};
};
constructor(props) {
super(props);
this.state = {
modalIsVisible: false
};
}
componentDidMount() {
const { navigation } = this.props;
navigation.setParams({
handleAdditionalModal: this.toggleAdditionalModal
});
}
toggleAdditionalModal() {
this.setState({
modalIsVisible: true
});
}
render() {
const { modalIsVisible } = this.state;
return (
<View>
<Text>Settings</Text>
<AdditionalModal isVisible={modalIsVisible} />
</View>
);
}
}
export default Settings;
我做错了什么,以及在react-navigation标题中处理此类点击事件的最佳方法是什么?
谢谢!
尝试使用toggleAdditionalModal
的箭头功能
toggleAdditionalModal = () =>{
this.setState({
modalIsVisible: true
});
}
你需要箭头功能,因为你想访问this
属性,它指的是当前的类。
箭头函数意味着this
不会引用函数的上下文,而是引用类的上下文。