javascript - 如何更改表格数据以与模式中的按钮 react

Question

嗨，我的 react 组件有问题。我不知道如何从所有元素的共享模式更新表中的元素。在我的真实案例中，我有学生的时间表，我必须编辑包含主题的列。单击表中的主题后，模式应打开，在我选择要输入的主题后，模式应更改。我在 codeblox 上准备了基本的情况模型。请问我应该如何通过此模式访问特定列并使用按钮的值更新该列。谢谢帮助

这是我在 codeblox 上的示例:

这是链接:https://codesandbox.io/s/quizzical-butterfly-g8dr1重要提示:您必须删除 Todo 组件中的 BUTTON 并将其粘贴回来。我不知道为什么，但除此之外它不起作用。!!!我无法运行 bootstrap，但这并不重要

import ReactDOM from "react-dom";
import React, { Component } from "react";
import Modal from "react-bootstrap/Modal";
import Button from "react-bootstrap/Button";

export default class Col extends Component {
  render() {
    return <div>{this.props.data}</div>;
  }
}

class Todo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [
        { Firstname: "Jill", Lastname: "Bill", Age: 18 },
        { Firstname: "Jill2", Lastname: "Bill2", Age: 180 },
        { Firstname: "Jill3", Lastname: "Bill3", Age: 1 }
      ],
      modal: false
    };
  }

  renderColumn() {
    return this.state.items.map(i => (
      <tr>
        <td>
          <Col data={i.Firstname} />
        </td>
        <td>
          <Col data={i.Lastname} />
        </td>
        <td>
          <Col data={i.Age} />
        </td>
      </tr>
    ));
  }

  render() {
    return (
      <div>
        <table>
          <thead />
          <tbody>{this.renderColumn()}</tbody>
        </table>
        <Button
          variant="primary"
          onClick={() => this.setState({ modal: true })}
        >
          Launch vertically centered modal
        </Button>
        <p>------------------------------------------------------</p>
        <MyModal
          show={this.state.modal}
          onHide={() => this.setState({ modal: true })}
        />
      </div>
    );
  }
}

export class MyModal extends Component {
  render() {
    return (
      <Modal.Dialog>
        <Modal.Header closeButton>
          <Modal.Title>Modal title</Modal.Title>
        </Modal.Header>

        <Modal.Body>
          <p>Modal body text goes here.</p>
        </Modal.Body>

        <Modal.Footer>
          <Button variant="secondary">Mark</Button>
          <Button variant="primary">Joseph</Button>
        </Modal.Footer>
      </Modal.Dialog>
    );
  }
}
ReactDOM.render(<Todo />, document.getElementById("root"));

真实情况是这样的: Modal

那些蓝色按钮是主题。在我单击时间表中的按钮之一后 -> 模式将打开，在我选择一个按钮后 -> 时间表中的值应该更改

Answer 1

这种情况可能适合您:

1. 将 selectedStudent: null, 添加到 Todo 组件状态
2. 删除带有“启动垂直居中模式”文本的按钮
3. 向每行学生添加新按钮。将其命名为“选择”
4. 向 Todo 组件添加新方法，例如selectStudent 它将有一个参数 - 学生对象。此外，此方法可能会使用 setState 和回调。回调将打开模式(通过更改状态 modal: true)。当您单击“选择”按钮时将触发此方法
5. 将新属性传递给模态:selectedStudent，其值为this.state.selectedStudent
6. 当模态关闭时 - 再次将 selectedStudent 设置为 null

如果这里有些内容令人困惑或者您需要进一步解释，请询问

注意您还可以从状态中删除 modal 键，并仅当 selectedStudent 是对象时有条件地渲染模态。当 selectedStudent 为 null 时 - 应关闭模式。