无法打开/关闭带有父类组件和子功能组件的模态

Posted 2023-03-16

【中文标题】无法打开/关闭带有父类组件和子功能组件的模态

【英文标题】：Unable to open/close modal with parent class component and child functional component

【发布时间】：2022-01-12 04:37:31

【问题描述】：

我有一个父组件，我正在努力正确打开/关闭子组件（模态）。下面的两个代码框是我的组件的简化示例。

编辑：这是一个带有以下代码的代码沙箱——没有实际的模式，但是我已经记录了我认为会对这个问题产生影响的所有有状态值，你可以看到它们是如何产生的改变/不要像我希望的那样改变。

Code Sandbox

当父组件打开时，我可以点击MenuItem，我可以看到状态变化，但是模态不会打开，除非我暂时关闭父组件并重新打开它（然后父组件在模态打开的情况下打开已经） 当模式打开时，我尝试通过单击关闭按钮来关闭（该按钮在 onClick 方法内部具有来自父级的状态更改功能。this.state.showModal 保持为真，不会更改为假。 如果我将 closeModal 状态值添加到子组件并在关闭按钮 onClick 期间更改它，this.state.showModal 仍然保持 true。

感谢任何伸出援手的人，如果您有任何澄清问题，请随时提出！

class Parent extends Component 
    
    constructor(props) 
      super(props);
      this.showModal = this.showModal.bind(this);
      this.closeModal = this.closeModal.bind(this)
      this.state = 
        showModal: false
      ;
    this.showModal = this.showModal.bind(this)
    this.closeModal = this.closeModal.bind(this)
    
    showModal() 
      this.setState( showModal: true );
    
    closeModal() 
      this.setState( showModal: false );
    
    render()  
      return (
      <MenuItem onClick=this.showModal>
      <ChildComponent
       prop1=prop1
       isOpen=this.state.showModal
       closeModal=this.closeModal
       />
       </MenuItem>
)

const ChildComponent = (
  prop1,
  isOpen,
  closeModal
  ) => 
  
  const [modalOpen, setModalOpen] = useState(isOpen)


  useEffect(() => 
    setModalOpen(isOpen)
  ,[isOpen])
  
  console.log('isopen on child', isOpen)
  console.log('modalOpen', modalOpen)
  return (
  <div>
   modalOpen && (
  <button
  onClick=() => 
    setModalOpen(false)
    closeModal()
  
  >
    'click to close modal'
    </button>
   )
   </div>
)

)

【问题讨论】：

您是否介意制作一个可以显示完整代码的沙盒。如果您愿意，可以使用 codesandbox.io 。这将更容易理解究竟是什么问题。

@decpk 我已将代码附加到代码盒中，并让控制台记录了每个文件上的值——您将能够看到状态发生变化的位置，并且不会以我想要的方式发生变化他们到codesandbox.io/s/beautiful-moon-nem8m?file=/src/…

@PatrickAllen 请重新检查附加的链接。我在里面看不到你的代码，只有几个空文件！

@MathewsSunny 再次检查链接——我没有意识到我必须事先保存文件，但我现在已经保存了！在深入解决问题后，我的 handleClose 函数似乎没有更新父组件状态。

【参考方案1】：

我发现了我的问题！

在我的父组件中，设置模式打开的 onClick 处理程序包装了我的子组件。我需要像这样删除它并有条件地单独渲染它：

<div>
        <div onClick=this.showModal>"Click here to open modal"</div>
        this.state.showModal && (
          <ChildComponent
            prop1=prop1
            isOpen=this.state.showModal
            closeModal=this.closeModal
          />
        )
      </div>