如何在模態中顯示選定的行

Question

目標：
當您按下按鈕時，所選行中的名字和姓氏將顯示在模式中。 您應該啟用重用相同模式的內容和代碼。

問題：
我不知道如何解決它，為了實現目標我錯過了一部分？

信息：
*我是 ReactJS 的新手

堆棧閃電戰：
https://stackblitz.com/edit/reactjs-part1-hello-world-xu6up2?file=style.css

---

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

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

    this.state = {
      modalIsOpen: false
    };

    this.handleOpenModal = this.handleOpenModal.bind(this);
    this.handleCloseModal = this.handleCloseModal.bind(this);
  }

  handleOpenModal() {
    this.setState({ isModalOpen: true });
  }

  handleCloseModal() {
    this.setState({ isModalOpen: false });
  }

  render() {
    return (
      <div>
        <table border="1">
          <thead>
            <tr>
              <th>First Name</th>
              <th>Last Name</th>
              <th />
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Josef</td>
              <td>Andersson</td>
              <td>
                <button onClick={this.handleOpenModal}>Open Modal</button>
              </td>
            </tr>
            <tr>
              <td>Jim</td>
              <td>West</td>
              <td>
                <button onClick={this.handleOpenModal}>Open Modal</button>
              </td>
            </tr>
            <tr>
              <td>Joe</td>
              <td>West</td>
              <td>
                <button onClick={this.handleOpenModal}>Open Modal</button>
              </td>
            </tr>
          </tbody>
        </table>

        <div>
          <Modal className="confirmation-modal" isOpen={this.state.isModalOpen}>
            First Name: <br />
            Last Name: <br />
            <br />
            <button onClick={this.handleCloseModal}>Close Modal</button>
          </Modal>
        </div>
      </div>
    );
  }
}

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

---

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;
}

Answer 1

我建議實際上使內容動態化。 這將使您能夠輕松訪問該數據。

this.state = {
  modalOpenWith: null,
  items: [
    { firstName: 'Josef', lastName: 'Anderson', key: 'josef.anderson' },
    { firstName: 'Jim', lastName: 'West', key: 'jim.west' },
    { firstName: 'Joe', lastName: 'West', key: 'joe.west' }
  ]
};

然后渲染它：

<tbody>
  {items.map(({ firstName, lastName, key }, i) => (
    <tr key={key}>
      <td>{firstName}</td>
      <td>{lastName}</td>
      <td>
        <button onClick={() => this.handleOpenModal(i)}>Open Modal</button>
      </td>
    </tr>
  ))}
</tbody>;

您也可以直接存儲打開的項目而不是索引。 這可能會避免一些 state 錯誤。

鑰匙

您現在需要一個密鑰，以便在數組更改的情況下，react 知道刪除/添加了哪個項目。 該鍵在數組中必須是唯一的。 因此，在這種情況下，您可能會擁有某種類型的用戶 id，但我選擇向數組添加一個類似於登錄用戶名的鍵屬性（無論什么）。

在此處閱讀有關密鑰的更多信息： https://reactjs.org/docs/lists-and-keys.html#keys

箭頭函數而不是方法

我還冒昧地將您的 this 綁定轉換為帶有箭頭函數的屬性。 這樣，上下文總是這樣。 看看它。

Stackblitz 索引：

https://stackblitz.com/edit/reactjs-part1-hello-world-58yys2?file=index.js

Stackblitz 與項目：

https://stackblitz.com/edit/reactjs-part1-hello-world-27rr7b

Answer 2

將您的用戶置於以下狀態：

users: [
    { fname: 'a', lname: 'b' },
    { fname: 'c', lname: 'd' },
    { fname: 'f', lname: 'e' }
  ]

在您的表格中，您可以使用 map，但如果您的數據來自 state，請檢查是否先設置：

{this.state.users !== "undefined" &&
          this.state.users.map((user, index) => {
            const { fname, lname } = user; //destructuring
            return (
              <tr key={index}>
                <td>{fname}</td>
                <td>{lname}</td>
                <td>
                  <button
                    onClick={() => this.handleOpenModal(fname, lname)}
                  >
                    Open Modal
                  </button>
                </td>
              </tr>
            );
          })}

https://stackblitz.com/edit/reactjs-part1-hello-world-grvypp?file=index.js