时间戳

首页 > 解决方案 > 无法关闭从父组件触发的模式

reactjs - 无法关闭从父组件触发的模式

问题描述

我正在从父组件触发一个 react-native 模态，模态显示出来，当我尝试使用子组件/模型本身中的按钮关闭模态时，没有任何反应。

任何帮助，将不胜感激。

这是在子组件中

state = {
  display: false,
};

setModalVisible(visible) {
  this.setState({display: visible});
}

onPress={() => {
  this.setModalVisible(!this.state.display);
}}

这是在父组件中

<DisplayModal display={this.state.display} />


triggerModal() {
  this.setState(prevState => {
   return {
     display: true
     };
  });
}

this.triggerModal()

标签： reactjsreact-native

解决方案

您应该否定模态值以打开和关闭它

triggerModal() {
  this.setState(prevState => {
   return {
     display: !prevState.display
     };
  });
}

而不是将状态传递给setModalVisible，您可以只使用回调 setState。

setModalVisible() {
  this.setState(prevState => ({display: !prevState.display}));
}

onPress={() => {
  this.setModalVisible();
}}

编辑：

您添加了代码，这可能是问题所在

ADD_DETAILS(index) {
    if (index === 0) {
        console.log("clicked 0");
        this.triggerModal();
        console.log(this.state.display);
    }
}

它不打开和关闭的原因可能是因为它没有通过 if 条件。

编辑2：

现在我看到了你的问题，你需要做的是召集triggerModal孩子们。

所以这是你需要做的

  1. triggerModal作为道具传递给孩子
  2. 当你想关闭模式时调用它。

所以这里是父级的变化。

<DisplayModal display={this.state.display} triggerModal={this.triggerModal}/>

而在孩子

onPress={() => {
  this.props.triggerModal();
}}

推荐阅读