时间戳

首页 > 解决方案 > 如何更改表格数据以响应模式中的按钮

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

问题描述

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

这是我在 codeblox 上的示例：

这是链接：https ://codesandbox.io/s/quizzical-butterfly-g8dr1 重要提示：您必须删除 Todo 组件中的 BUTTON 并将其粘贴回来.. idk 为什么但另一方面它不起作用。 ！！！我无法运行引导程序，但这并不重要

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"));

真实情况是这样的： 模态的

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

标签： javascriptreactjsreact-bootstrap

解决方案

这种情况可能适合您：

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

如果这里看起来有些混乱或者您需要进一步的解释，请询问

注意，您也可以从状态中删除键并仅在对象modal时有条件地呈现模态。selectedStudent何时- 模selectedStudent态null应该关闭。

推荐阅读