У меня странная проблема с реактивной модой - PullRequest
Новая
       20

У меня странная проблема с реактивной модой

0 голосов
/ 11 февраля 2020

ПРОБЛЕМА: Существует форма с несколькими разделами. В каждом разделе есть кнопка, которая открывает модал с формой внутри. В моей MainForm у меня есть свои разделы - Местоположения, Приобретения, Раунды финансирования. В разделе «Локации» есть кнопка «Создать новую локацию». В разделе «Приобретения» есть кнопка «Создать новое приобретение». В разделе «Раунды финансирования» есть кнопка «Создать новые раунды финансирования». Когда пользователь нажимает на одну из этих кнопок, должна открываться соответствующая форма. Но проблема с моим кодом заключается в том, что независимо от того, какую кнопку я нажимаю, он открывает модальное окно AcquisitionForm.

У меня есть мой основной компонент MainForm.jsx, который отображает несколько других компонентов. Эти дочерние компоненты будут иметь кнопку внутри них, и когда кнопка будет нажата, я хочу форму внутри модальной области. модал для модалов. 

MainForm.jsx

import React, { Component } from 'react';
import Locations from '../SharedFormSections/Locations';
import FundingRounds from '../SharedFormSections/FundingRounds';
import Acquisitions from '../SharedFormSections/Acquisitions';

class MainForm extends Component {

  constructor(props) {
    super(props);
    this.state = {
      modalIsOpen: false
    };

    this.openModal = this.openModal.bind(this);
    this.afterOpenModal = this.afterOpenModal.bind(this);
    this.closeModal = this.closeModal.bind(this);
  }

  openModal(event) {
    event.preventDefault();
    this.setState({modalIsOpen: true});
  }

  afterOpenModal() {
    // references are now sync'd and can be accessed.
    this.subtitle.style.color = '#f00';
  }

  closeModal() {
    this.setState({modalIsOpen: false});
  }

  render() {
    return (
      <form className="mainform">

        <Locations sectionTitle="3. Location(s)" modalIsOpen={this.state.modalIsOpen} openModal={this.openModal} closeModal={this.closeModal} afterOpenModal={this.afterOpenModal} />

        <FundingRounds sectionTitle="6. Funding Rounds" modalIsOpen={this.state.modalIsOpen} openModal={this.openModal} closeModal={this.closeModal} afterOpenModal={this.afterOpenModal} />

        <Acquisitions sectionTitle="7. Acquisitions" modalIsOpen={this.state.modalIsOpen} openModal={this.openModal} closeModal={this.closeModal} afterOpenModal={this.afterOpenModal} />

      </form>
    )
  }
}

export default MainForm;

Acquisitions.jsx 

import React from 'react';
import ReactDOM from 'react-dom';
import Modal from 'react-modal';

import FormSectionHeader from '../FormSectionHeader';
import FormSectionMain from '../FormSectionMain';
import AcquisitionsForm from './AcquisitionsForm';
import Button from '../MicroElements/Button';

const Acquisitions = (props) => {
  return (
    <section className="main__form__section" id="acquisitions">

        <FormSectionHeader title={props.sectionTitle} />

        <FormSectionMain>

          <Button 
            clickHandler={props.openModal} 
            buttonText="Create New Acquisition" />

          <Modal
            isOpen={props.modalIsOpen}
            onAfterOpen={props.afterOpenModal}
            onRequestClose={props.closeModal}
            contentLabel="Add New Acquisition(s) Modal">

            <AcquisitionsForm closeModal={props.closeModal} />

          </Modal>

        </FormSectionMain>
      </section>
  )
}

export default Acquisitions;


**`Locations.jsx`**

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Modal from 'react-modal';

import FormSectionHeader from '../FormSectionHeader';
import FormSectionMain from '../FormSectionMain';
import LocationsForm from './LocationsForm';


class Locations extends Component {

  render() {
    return (
      <section className="contribute-page__main__form__section contribute-form__locations-section"  id="locations">

        <FormSectionHeader title={this.props.sectionTitle} />

        <FormSectionMain className="contribute-page__main__form__section__main">

          <Button clickHandler={this.props.openModal} 
            buttonText="Create New Acquisition" />

          <Modal
            isOpen={this.props.modalIsOpen}
            onAfterOpen={this.props.afterOpenModal}
            onRequestClose={this.props.closeModal}
            contentLabel="Add New Location(s) Modal">

            <LocationsForm closeModal={this.props.closeModal} />

          </Modal>

        </FormSectionMain>
      </section>
    );
  }
}


export default Locations;

Проблема заключается в том, что я нажимаю кнопку «Создать местоположение» или кнопку «Создать приобретение» или создаю финансирование круглая кнопка, я получаю всплывающее окно AcquisitionsForm . Пожалуйста, помогите мне. Мне нужно отправить это ночью.

Ответы [ 2 ]

0 голосов
/ 11 февраля 2020

Проблема в вашем коде

После просмотра вашего кода вы используете одну и ту же переменную состояния, чтобы открыть все модалы. Таким образом, в действительности все ваши модалы открываются, но, поскольку AcquisitionsForm находится в самом низу, он показывает над всеми модалами, а при закрытии все закрываются, как будто все другие формы не являются открытие.

Решение

Что вам нужно сделать, это иметь отдельную переменную состояния для каждой формы

0 голосов
/ 11 февраля 2020

Это потому, что у вас есть одно состояние без уникального идентификатора, для которого должен быть открыт модальный режим. Вам также необходимо сохранить идентификатор или имя в вашем штате. На данный момент открываются все три модальных режима, и поскольку Acquisitions находится в иерархии, поэтому вы можете видеть только Acquisitions модальный. Быстрое решение может состоять в том, чтобы сохранить отдельные состояния для всех модальных типов. Попробуйте это; 

constructor(props) {
    super(props);
    this.state = {
      isAcquisitions: false,
      isFundingRoundsModal: false,
      isLocationModal: false,
    };

    this.openModal = this.openModal.bind(this);
    this.afterOpenModal = this.afterOpenModal.bind(this);
    this.closeModal = this.closeModal.bind(this);
  }

  openModal(event, name) {
    event.preventDefault();
    if (name.toLowerCase() === 'acquisitions') {
      this.setState({ isAcquisitions: true });
    } else if (name.toLowerCase() === 'locations') {
      this.setState({ isLocationModal: true });
    }
    this.setState({ isFundingRoundsModal: true });
  }

И обновите реквизиты, которые вы отправляете своим компонентам 

<Locations sectionTitle="3. Location(s)" modalIsOpen={this.state.isLocationModal} openModal={this.openModal} closeModal={this.closeModal} afterOpenModal={this.afterOpenModal} />

        <FundingRounds sectionTitle="6. Funding Rounds" modalIsOpen={this.state.isFundingRoundsModal} openModal={this.openModal} closeModal={this.closeModal} afterOpenModal={this.afterOpenModal} />

        <Acquisitions sectionTitle="7. Acquisitions" modalIsOpen={this.state.isAcquisitions} openModal={this.openModal} closeModal={this.closeModal} afterOpenModal={this.afterOpenModal} />

Также отправьте имя реквизит в вашу функцию

...