小吃栏中的 onDismiss 功能在 react-native-paper 中不起作用答案

【问题标题】：onDismiss function in snackbar doesn't work in react-native-paper小吃栏中的 onDismiss 功能在 react-native-paper 中不起作用
【发布时间】：2019-07-10 08:15:35
【问题描述】：

我正在使用react-native 和react-native-paper 构建移动应用程序。而我在react-native-paper中使用SnackBar组件，如果我直接使用SnackBar组件，onDismiss在SnackBar组件中的函数效果很好。（表示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}/>

:

【问题讨论】：

标签： react-native react-native-paper

【解决方案1】：

您有一个包含snackbarVisible 的状态，它是SnackBarComponent 的本地状态，最初是false。

然后你有snackbarVisible 处于父组件状态，它是父组件的本地。和SnackBarComponent中的snackbarVisible不一样。

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

当您更新snackbarVisible（在这种情况下为关闭）时，您必须更新您在此处定义的visible={this.props.snackbarVisible}，它通过props 在父组件中包含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时，它会通过props传递的dismissSnack调用父组件中的handleDismissSnackbar。

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

【讨论】：