编辑：

Question

我从父组件触发了本机模式，该模式出现了，当我尝试使用子组件/模型本身中的按钮关闭模式时，什么也没有发生。

任何帮助将不胜感激。

这在子组件中

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

Answer 1

您应该取消模态值的打开和关闭

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

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

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。

这就是您需要做的

将triggerModal作为道具传递给孩子们
要关闭模式时调用它。

这就是父母的改变。

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

还有孩子

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

Answer 2

尝试一下：

在父=>

state = {
  display: false,
};

setModalVisible() {
  this.setState({display: !this.state.display});
}

<DisplayModal handlePress = this.setModalVisible.bind(this) display={this.state.display} />

然后在孩子里

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

Answer 3

这是我的处理方式：

function App() {
  const [showModal, setShowModal] = useState(true);

  const closeModal = () => setShowModal(false);

  const activateModal = () => setShowModal(true);

  return showModal ? (
    <DisplayModal closeModal={closeModal} display={showModal} />
  ) : (
    <button onClick={activateModal}>Display modal!</button>
  );
}

const DisplayModal = props =>
  props.display ? (
    <>
      <div>Display!!</div>
      <button onClick={props.closeModal}>Hide!</button>
    </>
  ) : null;

不用担心钩子，只需注意我使用的模式，将closeModal函数作为prop传递，并在任何情况下从子组件中调用它。

Answer 4

首先是

初始

state ={
  display: false}

创建函数handalepress

handalePress=()=>{
this.setState({
display:!this.state.display
}
<DisplayModal onClick= {this.handalePress}display={this.state.display} />

父组件触发的Cant关闭模式

4 个答案:

编辑：

编辑2：