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
        })
    };

保持表格的初始状态

1 个答案: