snackbar 中的 onDismiss 函数在 react-native-paper 中不起作用

Question

我正在使用 react-native 和 react-native-paper 构建移动应用程序。而我在react-native-paper中使用SnackBar组件，如果我直接使用SnackBar组件，SnackBar组件中的onDismiss功能运行良好。（这意味着小吃店会正确消失）

但是如果我使用我的原始组件（如 SnackBarComponent 组件），它使用 SnackBar 提供的组件 react-native-paper，不知何故，snackbar 将不会正确消失。

这是我的自定义 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 处于 parent 组件状态，它是 parent 组件的本地状态。它与 SnackBarComponent 中的 snackbarVisible 不同。

如果您没有在包含 snackbarVisible 的 parent 组件中明确定义状态，请注意，当您使用运行 setState 方法时，它将创建 snackbarVisible 在 state 如果找不到。

当您更新 snackbarVisible（在这种情况下关闭）时，您必须更新您在此处定义的 visible={this.props.snackbarVisible}，它包含 parent 中的 snackbarVisible通过 props 组件。这意味着您必须更新 parent 组件的 snackbarVisible。为此，您可以将回调传递给 SnackBarComponent 并更新 parent 组件中的正确值。这是一个例子：

    //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

那么本例中的children分量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>
    )
  }
}

现在当你按下关闭时，它会通过dismissSnack调用parent组件中的handleDismissSnackbar。

这是从 parent 控制的。受控组件示例。您可以在这里找到更多信息：https://reactjs.org/docs/forms.html#controlled-components

snackbar 中的 onDismiss 函数在 react-native-paper 中不起作用

onDismiss function in snackbar doesn't work in react-native-paper

react-native

react-native-paper