2

我正在使用react-nativeand构建移动应用程序react-native-paper。而且我在使用SnackBar组件react-native-paper，如果我SnackBar直接使用组件，onDismiss功能在SnackBar效果很好。（这意味着小吃店将正确消失）

但是，如果我使用使用提供的组件的原始组件（如SnackBarComponent组件）SnackBarreact-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}/>

:
4

1 回答 1

2

您有一个包含snackbarVisiblewhich is local to的 state SnackBarComponent，它最初是false.

然后，您snackbarVisible处于父组件状态，它是父组件的本地状态。它与snackbarVisible中的不同SnackBarComponent。

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

当您更新时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>
    )
  }
}

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

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

于 2019-07-10T08:56:31.990 回答