Функция onDismiss в снэк-баре не работает в реактивной бумаге

Question

Я создаю мобильное приложение с react-native а также react-native-paper, А я пользуюсь SnackBar компонент в react-native-paperи если я использую SnackBar компонент напрямую, onDismiss функция в SnackBar компонент работает хорошо. (Это означает, что закусочная исчезнет правильно)

Но если я использую свой оригинальный компонент (как SnackBarComponent компонент), который использует SnackBar компонент предоставляется react-native-paperКаким-то образом закусочная не исчезнет правильно.

Это мой пользовательский компонент SnackBar и код, который вызывает мой оригинальный компонент SnackBar.

• Мой оригинальный компонент SnackBar

import React, { Component } from 'react';
import { Text } from 'react-native';
import { Provider, Snackbar } from 'react-native-paper';

export default class SnackBarComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      snackbarVisible: false
    }
  }

  render() {
    return(
      <Provider>
        <Snackbar
          visible={this.props.snackbarVisible}
          onDismiss={() => this.setState({ snackbarVisible: false })}
        >
          <Text>{this.props.snackbarText}</Text>
        </Snackbar>
      </Provider>
    )
  }
}

• Код, который вызывает SnackBarComponent (это не весь код)

import SnackBarComponent from './components/SnackBarComponent';

:

handleShowSnackbar() {
  this.setState({
    snackbarVisible: true,
    snackbarText: 'show snackbar'
  })
}

:

<SnackBarComponent snackbarVisible={this.state.snackbarVisible} snackbarText={this.state.snackbarText}/>

:

Answer 1

У вас есть состояние, содержащее snackbarVisible который является локальным для SnackBarComponent и это изначально false,

Тогда у вас есть snackbarVisible в состоянии родительского компонента, где он является локальным по отношению к родительскому компоненту. Это не то же самое, что snackbarVisible в SnackBarComponent,

В случае, если вы специально не определили состояние в родительском компоненте, содержащем snackbarVisibleобратите внимание, что при запуске setState метод это создаст snackbarVisible в state если не найден

Когда вы обновляете snackbarVisible(отклонить в этом случае) вы должны обновить тот, который вы определили здесь visible={this.props.snackbarVisible} который содержит snackbarVisible в родительском компоненте через реквизит. Это означает, что вы должны обновить родительский компонент snackbarVisible, Для этого вы можете передать обратный вызов SnackBarComponent и обновите правильное значение в родительском компоненте. Вот пример:

    //parent component
    import SnackBarComponent from './components/SnackBarComponent';

    :

    handleShowSnackbar() {
      this.setState({
        snackbarVisible: true,
        snackbarText: 'show snackbar'
      })
    }

//add a function to update the parents state
    handleDismissSnackbar = () => {
      this.setState({
        snackbarVisible: false,
      })
    }

    :

    <SnackBarComponent snackbarVisible={this.state.snackbarVisible}
                       snackbarText={this.state.snackbarText}
                       dismissSnack={this.handleDismissSnackbar}/>   //add here

Тогда дочерний компонент SnackBarComponent в этом случае следующим образом:

import React, { Component } from 'react';
import { Text } from 'react-native';
import { Provider, Snackbar } from 'react-native-paper';

export default class SnackBarComponent extends Component {
//you dont need to maintain this local state anymore for this purpose  
/*constructor(props) {
    super(props);
    this.state = {
      snackbarVisible: false
    }
  }*/

  render() {
    return(
      <Provider>
        <Snackbar
          visible={this.props.snackbarVisible}
          onDismiss={() => this.props.dismissSnack()}   //use that function here
        >
          <Text>{this.props.snackbarText}</Text>
        </Snackbar>
      </Provider>
    )
  }
}

Теперь, когда вы нажмете "Отклонить", он вызовет handleDismissSnackbar в родительском компоненте dismissSnack прошел через реквизит.

это контролирует от родителя. Пример контролируемых компонентов. Вы можете найти об этом больше здесь: https://reactjs.org/docs/forms.html