如何更改表格数据以对模式中的按钮做出反应 [英] How to change table data in react with buttons in modal

问题描述

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

这是我在 codeblox 上的示例:

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

从react-dom"导入 ReactDOM；import React, { Component } from "react";从react-bootstrap/Modal"导入模态；从react-bootstrap/Button"导入按钮；导出默认类 Col 扩展组件 {使成为() {返回<div>{this.props.data}</div>;}}类 Todo 扩展组件 {构造函数(道具){超级(道具)；this.state = {项目: [{名字:吉尔"，姓氏:比尔"，年龄:18}，{名字:Jill2"，姓氏:Bill2"，年龄:180 }，{ 名字:Jill3"，姓氏:Bill3"，年龄:1 }],模态:假};}渲染列(){返回 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>));}使成为() {返回 (<div><表格><头/><tbody>{this.renderColumn()}</tbody><按钮变体=主要"onClick={() =>this.setState({ modal: true })}>启动垂直居中模式</按钮><p>------------------------------------------------------</p><我的模态显示={this.state.modal}onHide={() =>this.setState({ modal: true })}/>

);}}导出类 MyModal 扩展组件 {使成为() {返回 (<模态对话框><Modal.Header closeButton><Modal.Title>模态标题</Modal.Title></Modal.Header><模态体><p>模态正文放在这里.</p></Modal.Body><模态.页脚><Button variant="secondary">Mark</Button><Button variant="primary">Joseph</Button></Modal.Footer></Modal.Dialog>);}}ReactDOM.render(, document.getElementById("root"));

实际情况是这样的:模态

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

解决方案

这个场景可能适合你:

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

如果这里有什么东西看起来很混乱或者你需要进一步的解释，请询问

注意您也可以从状态中删除 modal 键并仅当 selectedStudent 是对象时有条件地呈现模态.当 selectedStudent 为 null 时 - 应关闭模态.

Hi i have problem with my react components. I don't know how to update element in table from shared modal for all elements. In my real case i have students timetable and i have to edit columns with subjects. After I click on subject in table, modal should open and after i choosed which subject i want to input it should change. I prepeared basic model of situation on codeblox. Please how should i access to specific column throught this modal and update that column with value of button. Thx for help

This is my example on codeblox:

Here is the link: https://codesandbox.io/s/quizzical-butterfly-g8dr1 IMPORTANT: You have to remove BUTTON in Todo component and paste it back.. idk why but otherside it not works. !!! i was unable to run bootstrap but it is not important

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

Real situation looks like this: Modal

Those blue buttons are subjects. After i click one of the button in timetable -> modal will open and after i choose one -> value in timetable should change

解决方案

This scenario might work for you:

1. add selectedStudent: null, to the Todo component state
2. remove button which have text "Launch vertically centered modal"
3. add new button to each row of students. Name it something like "Select"
4. add new method to Todo component e.g. selectStudent which will have one argument - student object. Also this method might use setState with callback. Callback will open the modal (by changing state modal: true). This method is what will be fired when you click on "Select" button
5. pass new prop to the modal: selectedStudent which value will be this.state.selectedStudent
6. when modal get closed - set selectedStudent to null again

If something seems confusing here or you need further explanation please ask

N.B. you might also remove modal key from state and conditionally render modal only when selectedStudent is an object. When selectedStudent is null - modal should be closed.

这篇关于如何更改表格数据以对模式中的按钮做出反应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！