Question

我正在使用“反应式模态” npm软件包

如果您克隆并运行“ npm start”

您将看到这样的虚拟用户界面

header
click me objId: 43
click me objId: 42
click me objId: 41

当我单击43、42、41时，console.log始终输出41。我期望它分别输出43、42、41。

与onclick有关吗？是否需要使用onclick闭合？

这是主要代码

import React, { Component } from 'react';
//import logo from './logo.svg';
//import './App.css';

import Modal from 'react-responsive-modal';

class App extends Component {

    constructor(props) {
        super(props);

        this.state = {
            isModelOpen: false
        }
    }

    mydata() {
        let arr = [
            {
                id: 43,
                date: "Nov 26, 2018",
            },
            {
                id: 42,
                date: "Nov 26, 2018",
            },
            {
                id: 41,
                date: "Nov 26, 2018",
            },
        ];

        return arr;
    }

    modalNoButton() {
        this.setState({ isModelOpen: false });
    }

    modalYesButton(objId, date) {

        // test
        console.log('-- modalYesButton --');
        console.log(objId);
        console.log(date);
        this.setState({isModelOpen: false});
    }

    onOpenModal() {
        this.setState({ isModelOpen: true });
    }

    onCloseModal() {
        this.setState({ isModelOpen: false });
    }

    createActionHtml(objId, date) {

        // test
        //console.log('-- createActionHtml --');
        //console.log(objId);

        let {isModelOpen} = this.state;
        let pointerStyle = {
            cursor: 'pointer'
        };

        let bigMarginStyle = {
            marginTop: '30px'
        }

        return (
            <div>
                <div className='myPointer'>
                    <a onClick={this.onOpenModal.bind(this)} style={pointerStyle}>click me objId: {objId}</a>
                </div>
                <Modal open={isModelOpen} onClose={this.onCloseModal.bind(this)}>

                    <div style={bigMarginStyle}>
                        popup
                    </div>

                    <div className='row'>
                        <div className='col xs-6'>
                            <button
                                onClick={() => {this.modalYesButton(objId, date)}}
                            >
                                Yes
                            </button>
                        </div>

                        <div className='col xs-6'>
                            <button
                                onClick={this.modalNoButton.bind(this)}
                            >
                                No
                            </button>
                        </div>
                    </div>
                </Modal>
            </div>
        );
    }

    myhistory() {
        let arr = this.mydata();
        let html = arr.slice(0, 3).map((obj, index) => {
            let objId = obj.id;
            let date = obj.date;
            let actionHtml = this.createActionHtml(objId, date);

            return (
                <div key={index}>
                    {actionHtml}
                </div>
            );
        });

        return html;
    }

    render() {
        return (
            <div className="App">
                <header className="App-header">
                    header
                </header>

                {this.myhistory()}
            </div>
        );
    }
}

export default App;

Answer 1

问题在于，您实际上是在彼此之上渲染三个模态，每个模态一个，而ID为41的最后一个模态位于顶部。状态isOpenModal是一个布尔值，它确定是否渲染所有三个模态，但是您确实想跟踪三个模态中的哪个模态是打开的，因此我将isOpenModal替换为openModalId

以下是适用的代码框：https://codesandbox.io/s/j388zzyow3

import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
import Modal from "react-responsive-modal";

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      openModalId: null
    };
  }

  mydata() {
    let arr = [
      {
        id: 43,
        date: "Nov 26, 2018"
      },
      {
        id: 42,
        date: "Nov 26, 2018"
      },
      {
        id: 41,
        date: "Nov 26, 2018"
      }
    ];

    return arr;
  }

  modalNoButton() {
    this.setState({ openModalId: null });
  }

  modalYesButton(objId, date) {
    // test
    console.log("-- modalYesButton --", objId);
    this.setState({ openModalId: null });
  }

  onOpenModal(objId) {
    this.setState({ openModalId: objId });
  }

  onCloseModal() {
    this.setState({ openModalId: null });
  }

  createActionHtml(objId, date) {
    // test
    // console.log('-- createActionHtml --', objId);

    let { isModelOpen } = this.state;
    let pointerStyle = {
      cursor: "pointer"
    };

    let bigMarginStyle = {
      marginTop: "30px"
    };

    return (
      <div>
        <div className="myPointer">
          <a onClick={() => this.onOpenModal(objId)} style={pointerStyle}>
            click me objId: {objId}
          </a>
        </div>
        <Modal
          open={this.state.openModalId === objId}
          onClose={this.onCloseModal.bind(this)}
        >
          <div style={bigMarginStyle}>popup</div>

          <div className="row">
            <div className="col xs-6">
              <button
                onClick={() => {
                  this.modalYesButton(objId, date);
                }}
              >
                Yes
              </button>
            </div>

            <div className="col xs-6">
              <button onClick={this.modalNoButton.bind(this)}>No</button>
            </div>
          </div>
        </Modal>
      </div>
    );
  }

  myhistory() {
    let arr = this.mydata();
    let html = arr.slice(0, 3).map((obj, index) => {
      let objId = obj.id;
      let date = obj.date;
      let actionHtml = this.createActionHtml(objId, date);

      return <div key={index}>{actionHtml}</div>;
    });

    return html;
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">header</header>

        {this.myhistory()}
      </div>
    );
  }
}

export default App;

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

单击按钮时，id始终相同

1 个答案: