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

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

1 голос
/ 10 июля 2019

Я создаю мобильное приложение с 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}/>

:

1 Ответ

1 голос
/ 10 июля 2019

У вас есть состояние, содержащее 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>
    )
  }
}

Теперь, когда вы нажимаете dismiss, он вызывает handleDismissSnackbar в родительском компоненте через dismissSnack, пропущенный через реквизит.

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

...