How to change table data in react with buttons in modal

问题

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

回答1:

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.

来源：https://stackoverflow.com/questions/60907787/how-to-change-table-data-in-react-with-buttons-in-modal