我对 react-modal 有一个奇怪的问题

Question

问题： 有一个包含多个部分的表单。在每个部分中，都有一个按钮可以打开一个带有表单的模式。在我的 MainForm 中，我有它们的部分——地点、收购、融资轮次。位置部分有一个按钮 "Create New Location"。 Acquisitions 部分有一个按钮 "Create New Acquisition"。 Funding Rounds 部分有一个按钮“Create New Funding Rounds”。每当用户单击这些按钮之一时，应打开其相应的表单。但我的代码的问题是，无论我单击哪个按钮，它都会打开 AcquisitionForm 模式。

我有我的主要组件 MainForm.jsx，它渲染了一些其他组件。这些子组件内部将有一个按钮，当单击该按钮时，我想要一个模态内的表单。我正在为模态使用 react-modal。

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 的弹出窗口。请帮帮我。我需要在晚上提交。

Answer 1

这是因为您只有一个状态，没有应为其打开模态的唯一标识符。您还需要在您所在的州保留一个 ID 或名称。目前，所有三个模态都已打开，并且由于 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} />

此外，也将 name 属性发送到您的函数

Answer 2

The problem in your code

查看您的代码后，您正在使用相同的状态变量打开所有模式。因此，实际上，您的所有模态都在打开，但由于 AcquisitionsForm 位于最底部，它显示在所有模态之上，并且在关闭时，所有模态都在关闭，看起来像所有其他表格打不开

Solution

您需要做的是为每个表单设置一个单独的状态变量

我对 react-modal 有一个奇怪的问题

I have a weird issue with react-modal

javascript

reactjs

react-modal