Javascript 在同一行中按两次后，模式不显示

目标：
允许在关闭模式后再次单击同一行中的同一按钮打开模式。最后，您在同一行中按了两次按钮。每次按下按钮时，都会出现一个模式

问题：
当我再次按下按钮时，在同一行中，模式不显示。
我不明白为什么在按下同一行的相同按钮后，它不能再次显示相同的模式

信息：
*我是个新手

Stackblitz:
?

谢谢大家!

---

index.js

import React, { Component } from 'react';
import { render } from 'react-dom';
import './style.css';
import Modal from 'react-modal';
import Select from 'react-select';
import DisplayModalContent from './displayModalContent';

class App extends Component {
  constructor() {
    super();

    this.state = {
      openItem: null,
      items: [
        {
          firstName: 'Josef',
          lastName: 'Anderson',
          key: 'josef.anderson',
          startYear: 2021,
          startMonth: 2
        },
        {
          firstName: 'Jim',
          lastName: 'West',
          key: 'jim.west',
          startYear: 2020,
          startMonth: 3
        },
        {
          firstName: 'Joe',
          lastName: 'West',
          key: 'joe.west',
          startYear: 1998,
          startMonth: 10
        }
      ],
      firstName: '',
      lastName: ''
    };
  }

  handleOpenModal = openItem => {
    this.setState({ openItem });
  };

  handleCloseModal = () => {
    this.setState({ openItem: null });
  };

  handleOpenItemValue = e => {
    let { name, value } = e.target;
    this.setState({
      openItem: { ...this.state.openItem, [name]: value }
    });
  };

  handleSubmit = () => {
    console.log(document.getElementsByName('startMonth')[0].value);
    alert(
      JSON.stringify({
        test: document.getElementsByName('startMonth')[0].value
      })
    );
  };

  render() {
    const { items, openItem } = this.state;

    return (
      <div>
        <table border="1">
          <thead>
            <tr>
              <th>First Name</th>
              <th>Last Name</th>
              <th />
            </tr>
          </thead>
          <tbody>
            {items.map(item => {
              const { firstName, lastName, key } = item;

              return (
                <tr key={key}>
                  <td>{firstName}</td>
                  <td>{lastName}</td>
                  <td>
                    <button onClick={() => this.handleOpenModal(item)}>
                      Open Modal
                    </button>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
        <DisplayModalContent item={openItem} />
      </div>
    );
  }
}

Modal.setAppElement(document.getElementById('root'));
render(<App />, document.getElementById('root'));

---

您没有将closeModal事件传递回父级，因此openItem将保持填充状态，并且不会发生父级的重新渲染。通过添加一个接受回调的

onClose

prop，您可以很容易地解决这个问题：

import React, { Component } from 'react';
import { render } from 'react-dom';
import './style.css';
import Modal from 'react-modal';
import Select from 'react-select';

const options = [
  { value: 1, label: 'Jan' },
  { value: 2, label: 'Feb' },
  { value: 3, label: 'Mars' },
  { value: 4, label: 'April' },
  { value: 5, label: 'May' },
  { value: 6, label: 'June' },
  { value: 7, label: 'July' },
  { value: 8, label: 'August' },
  { value: 9, label: 'Sept' },
  { value: 10, label: 'Oct' },
  { value: 11, label: 'Nov' },
  { value: 12, label: 'Dec' }
];

class displayModalContent extends Component {
  constructor() {
    super();

    this.state = {
      openItem: null,
      firstName: '',
      lastName: ''
    };
  }

  componentDidUpdate(s) {
    if (JSON.stringify(this.props) !== JSON.stringify(s)) {
      this.setState({ openItem: this.props.item });
    }
  }

  handleOpenModal = openItem => {
    this.setState({ openItem });
  };

  handleCloseModal = () => {
    this.setState({ openItem: null });
  };

  handleOpenItemValue = e => {
    let { name, value } = e.target;
    this.setState({
      openItem: { ...this.state.openItem, [name]: value }
    });
  };

  handleSubmit = () => {
    console.log(document.getElementsByName('startMonth')[0].value);
    alert(
      JSON.stringify({
        test: document.getElementsByName('startMonth')[0].value
      })
    );
  };

  render() {
    const { items, openItem } = this.state;

    return (
      <div>
        {openItem !== null && (
          <Modal className="confirmation-modal" isOpen={true}>
            First Name:
            <br />
            <input
              type="text"
              id="firstName"
              name="firstName"
              value={openItem.firstName}
              onChange={e => this.handleOpenItemValue(e)}
            />
            <input
              type="text"
              id="lastName"
              name="lastName"
              value={openItem.lastName}
              onChange={e => this.handleOpenItemValue(e)}
            />
            <Select
              defaultValue={options.find(
                option => option.value === openItem.startMonth
              )}
              name="startMonth"
              id="testaaa"
              options={options}
            />
            <button onClick={this.handleCloseModal}>Close Modal</button>
            <button onClick={this.handleSubmit}>Test</button>
          </Modal>
        )}
      </div>
    );
  }
}

export default displayModalContent;

h1,
p {
  font-family: Lato;
}

.confirmation-overlay.ReactModal__Overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.6);
}

.confirmation-overlay.ReactModal__Overlay--after-open {
  opacity: 1;

  transition: opacity 300ms ease-out;
}

.confirmation-modal.ReactModal__Content {
  position: absolute;

  top: 25%;
  left: 50%;
  width: 500px;
  right: auto;
  bottom: auto;
  border: 1px solid #eee;
  margin-right: -50%;
  transform: scale(0);
  background-color: #fff;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  outline: none;
  padding: 20px;
  opacity: 0;
}

.confirmation-modal.ReactModal__Content--after-open {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  transition: all 300ms ease-out;
}

.confirmation-modal button {
  border: 1px solid black;
  background-color: #fff;
  color: #333;
  padding: 4px 8px;
  margin: 4px;
  border-radius: 3px;
  cursor: pointer;
}

.confirmation-modal button:hover {
  background-color: #eee;
}