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#controlled-components

小吃栏中的onDismiss函数在react-native-paper中不起作用

1 个答案: