时间戳

首页 > 解决方案 > 我对 react-modal 有一个奇怪的问题

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

问题描述

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

收购.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。请帮帮我。我需要在晚上提交。

标签： javascriptreactjsreact-modal

解决方案

这是因为您有一个没有唯一标识符的单一状态，应该为其打开模式。您还需要在您的州保留一个 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} />

此外，还将名称道具发送到您的函数

推荐阅读