反应导航标题onPress - this.setState不是函数

问题描述 投票:1回答:1

我在我的项目中使用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标题中处理此类点击事件的最佳方法是什么?

谢谢!

javascript reactjs react-native
1个回答
2
投票

尝试使用toggleAdditionalModal的箭头功能

 toggleAdditionalModal = () =>{
    this.setState({
      modalIsVisible: true
    });
  }

你需要箭头功能,因为你想访问this属性,它指的是当前的类。

箭头函数意味着this不会引用函数的上下文,而是引用类的上下文。

© www.soinside.com 2019 - 2024. All rights reserved.