React native snackbar中的onDismiss函数不'；我不在本地报纸上工作

我正在用

react native

和

react native paper

构建移动应用程序。 我在

react national paper

中使用

SnackBar

组件，如果我直接使用

SnackBar

组件，

SnackBar

组件中的

onDismiss

功能运行良好。（这意味着snackbar将正确消失）

但是如果我使用原始组件（如

SnackBarComponent

component），它使用

SnackBar

提供的组件

react native paper

，不知何故，SnackBar不会正确消失

这是我的自定义SnackBar组件和调用原始SnackBar组件的代码

• 我原来的SnackBar组件

import React，{Component}来自'React'；
从“react native”导入{Text}；
从“react native paper”导入{Provider，Snackbar}；
导出默认类SnackBarComponent扩展组件{
建造师（道具）{
超级（道具）；
此.state={
snackbarVisible:false
}
}
render（）{
返回(
this.setState（{snackbarVisible:false}）
>
{this.props.snackbartex}
)
}
}

• 调用SnackBarComponent的代码（这不是全部代码）

从“./components/SnackBarComponent”导入SnackBarComponent；
:
handleShowSnackbar（）{
这是我的国家({
snackbarVisible：没错，
snackbarText:“显示snackbar”
})
}
:
:

您有一个包含

snackbarVisible

的状态，该状态是

SnackBarComponent

的本地状态，最初为

false

然后，在父组件状态下，

snackbarVisible

，它位于父组件的本地。它与

SnackBarComponent

中的

snackbarVisible

不同

如果您没有在包含

snackbarVisible

的父组件中明确定义状态，请注意，当您运行

setState

方法时，如果未找到，它将在

状态中创建
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

现在，当您按下Disclose时，它将通过通过道具调用父组件中的
dismissnackbar

这是来自父级的控制。受控组件的示例。您可以在此处找到更多信息：

import SnackBarComponent from './components/SnackBarComponent';

:

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

:

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

:

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

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>
    )
  }
}