Как закрыть после нажатия кнопки отрендеренного компонента в реагировать? - PullRequest
Новая
       13

Как закрыть после нажатия кнопки отрендеренного компонента в реагировать?

0 голосов
/ 17 марта 2019

У меня проблемы с выяснением того, как закрыть компонент, который отображается. В настоящее время у меня есть возможность открыть модальный компонент на моей первой странице, но затем я хочу закрыть его по нажатию кнопки на компоненте. Как бы я это сделал? 

import React, { Component } from 'react';
  import AddModal from './addmodal';

  class Page extends Component {
    constructor(){
      super();
      this.state = { isModalOpen: false };
    }
    ...//skip
    handleAdd= () =>{
      this.setState({ isModalOpen: true });
    }
    render(){
      return (
        <div>
          <button onClick={this.handleAdd} > Add </button>
          <AddModal isOpen={this.state.isModalOpen} />
        </div>
        )
    }
  }


  import React, { Component } from 'react';

  class AddModal extends Component {
    // ... skip

  handleClose = () => {
    this.setState({ open: false });
  };

    render(){
      return(
        <modal inOpen={this.props.isOpen} >
        <Button onClick={this.handleClose}>
          Okay
        </Button>
          ...//skip
        </modal>
      )
    }
  }

  export default AddModal;

Ответы [ 2 ]

0 голосов
/ 17 марта 2019

Родительский компонент будет решать, открыт модал или нет, поэтому ему принадлежит состояние дочернего элемента.

Основываясь на том, что написал @jsdeveloper, я думаю, что вы можете избавиться от беспорядка, используя ту же функцию для управления открытием и закрытием модала.

Мы будем использовать функцию toggleModal, которая изменяет значение isModalOpen на true, когда оно false, и наоборот. Он использует обратный вызов, который принимает предыдущее значение состояния isModalOpen. 

toggleModal = () => {
  this.setState(prevState => ({
    isModalOpen: !prevState.isModalOpen
  }))
}

Итак, окончательный файл должен выглядеть примерно так. 

import React, { Component } from 'react';
import AddModal from './addmodal';

class Page extends Component {
  constructor() {
    super();
    this.state = {
      isModalOpen: false
    };
  }
  // ... //skip
  toggleModal = () => {
    this.setState((prevState) => ({
      isModalOpen: !prevState.isModalOpen
    }));
  };

  render() {
    return (
      <div>
        <button onClick={this.handleAdd}> Add </button>{' '}
        <AddModal
          isOpen={this.state.isModalOpen}
          toggleModal={this.toggleModal}
        />
      </div>
    );
  }
}

import React, { Component } from 'react';

class AddModal extends Component {
  // ... skip

  render() {
    return (
      <modal inOpen={this.props.isOpen}>
        <Button onClick={this.props.toggleModal}>Close</Button>
        //... skip
      </modal>
    );
  }
}

export default AddModal;
0 голосов
/ 17 марта 2019

Вам нужно, чтобы ваш модальный компонент вызывал обратный вызов onClose, чтобы родитель мог закрыть его: 

import React, { Component } from 'react';
  import AddModal from './addmodal';

  class Page extends Component {
    constructor(){
      super();
      this.state = { isModalOpen: false };
    }
    ...//skip
    handleAdd= () =>{
      this.setState({ isModalOpen: true });
    }
    handleClose= () =>{
      this.setState({ isModalOpen: false });
    }
    render(){
      return (
        <div>
          <button onClick={this.handleAdd} > Add </button>
          <AddModal isOpen={this.state.isModalOpen} handleClose={this.handleClose}/>
        </div>
        )
    }
  }


  import React, { Component } from 'react';

  class AddModal extends Component {
    // ... skip

    render(){
      return(
        <modal inOpen={this.props.isOpen} >
        <Button onClick={this.props.handleClose}> // call to parent
          Okay
        </Button>
          ...//skip
        </modal>
      )
    }
  }

  export default AddModal;
...