如何在模态中显示选定的行

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