Javascript 如何在modal中使用按钮更改REACTE中的表数据

嗨，我的react组件有问题。我不知道如何从所有元素的共享模式更新表中的元素。在我的真实案例中，我有学生时间表，我必须编辑带有主题的专栏。在我点击表格中的主题后，模态应该打开，在我选择了要输入的主题后，模态应该改变。我在codeblox上预习了基本的情况模型。请告诉我如何通过此模式访问特定列，并使用按钮值更新该列。Thx求救

这是我在codeblox上的示例：

以下是链接： 重要提示：您必须删除Todo组件中的按钮并将其粘贴回。。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"));

从“react-dom”导入ReactDOM；
从“React”导入React，{Component}；
从“反应引导/模式”导入模式；
从“反应引导/按钮”导入按钮；
导出默认类Col扩展组件{
render（）{
返回{this.props.data}；
}
}
类Todo扩展组件{
建造师（道具）{
超级（道具）；
此.state={
项目：[
{姓：“吉尔”，姓：“比尔”，年龄：18}，
{姓：“吉尔2”，姓：“比尔2”，年龄：180}，
{姓：“吉尔3”，姓：“比尔3”，年龄：1}
],
模态：假
};
}
renderColumn（）{
返回this.state.items.map（i=>(
));
}
render（）{
返回(
{this.renderColumn（）}
this.setState（{modal:true}）}
>
启动垂直居中模式
------------------------------------------------------

this.setState（{modal:true}）}
/>
);
}
}
导出类MyModal扩展组件{
render（）{
返回(
情态标题
模态体文本在这里

做记号
约瑟夫
);
}
}
render（，document.getElementById（“根”））；

实际情况如下：

---

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

此场景可能适用于您：

将

selectedStudent:null，

添加到

Todo

组件状态

删除文本为“启动垂直居中模式”的按钮

向每行学生添加新按钮。将其命名为“选择”

向Todo组件添加新方法，例如，

selectStudent

，该组件将有一个参数-student对象。此外，此方法还可以将

setState

与回调一起使用。回调将打开模式（通过更改状态

modal:true

）。此方法是当您单击“选择”按钮时将触发的方法

将新道具传递给模态：

selectedStudent

哪个值将是

this.state.selectedStudent

模式关闭时-再次将

selectedStudent

设置为

null

如果这里有什么令人困惑的地方，或者您需要进一步解释，请询问

---

注意：您也可以从状态中删除

modal

键，并且仅当

selectedStudent

是对象时才有条件地呈现modal。当

selectedStudent

为

null

时，应关闭模式。

表中的主题在哪里？这只是示例。我的代码比上面写的更大。在本例中，this.state.items就是我的主题。这与我在项目中使用的原理相同，您希望如何过滤它们以及在何处过滤它们？您将从哪个按钮选择主题？在示例

Mark Joseph

中，Mark and Joseph应该是值例如，您回答了我如何将学生对象设置为模态。我应该如何改变价值？因为我不能直接改变学生的道具。数据保存在表格中，所以我如何访问我选择的这个学生？您是否可以为此创建另一个帖子，因为您的最后一个q与您的帖子标题不匹配（“如何在模式中用按钮反应”中更改表格数据”）？不要忘记解释你的道具来自哪里（redux，另一个componet状态或远程api）。只要在这里添加新帖子的链接，我就可以加入讨论了。谢谢Thx的帮助没问题。很高兴见到你：）