Блог

во время изучения react я создал меню и по щелчку меню открываю форму. я хочу иметь значок «закрыть» в форме, который при нажатии закрывает форму и снова открывает ее при нажатии на меню.

я создал родительский компонент, который обрабатывает состояние формы (дочерний компонент). он управляет 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 amp;amp; <DemoForm onClose={this.closeChild} />}
        </div>
      );
    }
  }

export default ParentComponent;
 

это работает нормально, при нажатии кнопки форма закрывается, я проверил реакцию, состояние формы изменяется с showchild true на false. проблема в том, что в следующий раз, когда я попытаюсь щелкнуть меню, чтобы открыть эту форму, форма не откроется. потому что состояние showchild = false .

можем ли мы изменить состояние формы на showchild = true, как только форма будет окончательно закрыта, или любой другой метод.

как я могу этого добиться? я все еще реагирую, и следующей целью является сокращение. могу ли я сделать это с помощью управления состоянием реакции.

Вы просто меняете эту closeChild() функцию на triggerMenu() , поэтому, когда она открыта, она закроется, а когда она закрыта, она откроется:

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