保持表单的初始状态

Question

在学习反应时，我制作了菜单并在菜单上单击我打开了一个表单。我想在表单上有一个“关闭”图标，按下该图标会关闭表单，然后再次在菜单上单击将其打开。

我创建了一个处理表单状态的父组件（子组件）。它管理 showchild = true 或 false。

//this is button defined on form compenent
 <button onClick={this.props.onClose}>Self Close</button>


//this is parent component
import React from 'react';
import DemoForm from './form';

class ParentComponent extends React.Component {
    closeChild = () => {
      this.setState({
        showChild: false,
      });
    };

 constructor(props) {
      super(props);
      this.state = {
        showChild: true
      };
    }
   render() {
      return (
        <div>
          {this.state.showChild && <DemoForm onClose={this.closeChild} />}
        </div>
      );
    }
  }

export default ParentComponent;

这很好用，单击按钮时表单关闭，我检查了反应，表单的状态从 showchild true 变为 false。问题是下次我尝试单击菜单打开此表单时，表单无法打开。因为 showchild 的状态 = false。

一旦表单最终关闭或任何其他技术，我们可以将表单的状态更改为 showchild = true 吗？

我怎样才能做到这一点？我仍在反应，redux 是下一个目标。我可以通过反应状态管理来做到这一点吗？

Answer 1

您只需将 closeChild() 函数更改为 triggerMenu()，这样当它打开时它会关闭，当它关闭时它会打开：

    triggerMenu = () => {
        this.setState((prevState) => {
            showChild: !prevState.showChild
        })
    };