Как перемещаться по другому компоненту при использовании bind ()?

Question

Я использую react-navigation для навигации по другому компоненту.

Теперь я хочу navigate к другому компоненту с некоторыми параметрами (selectedCity 、 firstSliderValue 、 secondSliderValue), но onAccept()функция получит ошибку

TypeError: Cannot read property 'bind' of undefined 

Когда я добавил параметры раньше, я могу navigate к моему MovieClostTime компоненту.Почему я не могу добавить параметры?Что я должен делать?

Любая помощь будет оценена.Заранее спасибо.

Вот моя часть кода:

    constructor(props) {
        super(props);
        this.state = { 
          showModal: false, 
          selectedCity: 'Keelung',
          firstSliderValue: 18,
          secondSliderValue: 21
        };
      }
      // it will close <Confirm /> and navigate to MovieCloseTime component
      onAccept() {
        this.setState({ showModal: !this.state.showModal });
        const { selectedCity, firstSliderValue, secondSliderValue } = this.state;
        console.log(selectedCity); // Keelung
        console.log(firstSliderValue);  // 18
        console.log(secondSliderValue); // 21
        this.props.navigation.navigate('MovieCloseTime', {
          selectedCity,
          firstSliderValue,
          secondSliderValue
        });
      }

  // close the Confirm
  onDecline() {
    this.setState({ showModal: false });   
  }

    render() {
        if (!this.state.isReady) {
          return <Expo.AppLoading />;
        }
        const movies = this.state.movies;
        console.log('render FirestScrren');
        return (
          <View style={{ flex: 1 }}> 
            {/* Other View */}
            {/* <Confirm /> is react-native <Modal />*/}
            <Confirm
              visible={this.state.showModal}
              onAccept={this.onAccept.bind(this)}
              onDecline={this.onDecline.bind(this)}
              onChangeValues={this.onChangeValues}
            >
            </Confirm>      
          </View>
        );
      }

My Confirm.js

import React from 'react';
import { Text, View, Modal } from 'react-native';
import { DropDownMenu } from '@shoutem/ui';
import TestConfirm from './TestConfirm';
import { CardSection } from './CardSection';
import { Button } from './Button';
import { ConfirmButton } from './ConfirmButton';

const Confirm = ({ children, visible, onAccept, onDecline, onChangeValues }) => {

  const { containerStyle, textStyle, cardSectionStyle } = styles;

  return (
    <Modal
      visible={visible}
      transparent
      animationType="slide"
      onRequestClose={() => {}}
    >
      <View style={containerStyle}>
        <CardSection style={cardSectionStyle}>
          <TestConfirm onChangeValues={onChangeValues} />
          {/* <Text style={textStyle}>
            {children}
          </Text> */}
        </CardSection>

        <CardSection>
          <ConfirmButton onPress={onAccept}>Yes</ConfirmButton>
          <ConfirmButton onPress={onDecline}>No</ConfirmButton>
        </CardSection>
      </View>
    </Modal>
  );
};

const styles = {
  // some style
};

export { Confirm };