Javascript 我对你有一个奇怪的问题

问题：有一个表单包含多个部分。在每个部分中，都有一个按钮，用于打开一个包含表单的模态。 在我的main表单中，我有它们的部分-位置、收购、融资回合。位置部分有一个按钮“创建新位置”。采集部分有一个按钮“创建新采集”。“资金轮次”部分有一个按钮“创建新的资金轮次”。每当用户单击其中一个按钮时，应打开相应的表单。但我的代码的问题是，无论单击哪个按钮，它都会打开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;

MainForm.jsx
从“React”导入React，{Component}；
从“../SharedFormSections/Locations”导入位置；
从“../SharedFormSections/FundingRounds”导入资金轮次；
从“../SharedFormSections/Acquisitions”导入收购；
类MainForm扩展组件{
建造师（道具）{
超级（道具）；
此.state={
modalIsOpen:false
};
this.openModal=this.openModal.bind（this）；
this.afterOpenModal=this.afterOpenModal.bind（this）；
this.closeModal=this.closeModal.bind（this）；
}
OpenModel（事件）{
event.preventDefault（）；
this.setState（{modalIsOpen:true}）；
}
后OpenModel（）{
//引用现在已同步，可以访问。
this.subtitle.style.color='#f00'；
}
closeModal（）{
this.setState（{modalIsOpen:false}）；
}
render（）{
返回(
)
}
}
导出默认主窗体；

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;

从“React”导入React；
从“react dom”导入react dom；
从“反应模态”导入模态；
从“../FormSectionHeader”导入FormSectionHeader；
从“../FormSectionMain”导入FormSectionMain；
从“/AcquisitionsForm”导入AcquisitionsForm；
从“../MicroElements/Button”导入按钮；
常量采集=（道具）=>{
返回(
)
}
出口违约收购；
**`Locations.jsx`**
从“React”导入React，{Component}；
从“react dom”导入react dom；
从“反应模态”导入模态；
从“../FormSectionHeader”导入FormSectionHeader；
从“../FormSectionMain”导入FormSectionMain；
从“/LocationsForm”导入LocationsForm；
类位置扩展组件{
render（）{
返回(
);
}
}
导出默认位置；

---

问题是，当我单击“创建位置”按钮或“创建采集”按钮或“创建融资轮”按钮时，我会弹出“采集”窗体。请帮助我。我需要在夜间提交此窗体。

这是因为您有一个单一状态，没有唯一的标识符，应为其打开modal。 您还需要在您的状态中保留一个id或名称。目前，所有三个模态都将打开，并且由于

Acquisitions

在层次结构中处于较低的位置，因此您只能看到

Acquisitions

modal 一个快速的解决方案是为所有模态保持单独的状态，试试这个

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 prop

代码中的问题

查看代码后，您使用相同的状态变量打开所有模态。因此，实际上，您的所有模态都处于打开状态，但由于AcquisitionsForm位于最底部，它显示在所有模态之上，当关闭时，所有模态都处于关闭状态，似乎所有其他表单都没有打开

---

解决方案

---

你要做的是，为每种形式单独设置一个状态变量

不清楚你到底想要什么？@MuhammadHaseeb对不起。我知道。这很难解释，但我还是继续发帖。如果你愿意帮忙，我们可以通过闲逛联系吗。@MuhammadHaseeb编辑了这个问题。请阅读第一段问题是，希望是清楚的。你可以在twitter上给我发dm你是对的。我检查了页面，有三个表单出现——一个在另一个上面。是的。我想现在你可以从这里解决你的问题了。：）我不确定。我会试试@sirajalam谢谢你的回复。是的。顺便说一句，我刚刚在twitter上打了你的电话